Javascript 配置webpack和babel以转换节点依赖中的rest参数

我正在使用webpack和babel将我的JavaScript编译成ES5。它在我自己的代码中运行得很好，但当我添加依赖项时，我的库开始在Internet Explorer浏览器中抛出错误。当位置解析失败时，错误指向rest参数（例如，

函数（…t）

）

调试模块中的主文件是ES6（），不幸的是，对于节点模块依赖项的babel配置似乎没有任何指导

CLI输出似乎没有包含任何信息。正如预期的那样，正在创建输出文件，并且它们可以在现代浏览器上工作。这就是我无法摆脱的rest参数

谁能给我指出正确的方向吗？看起来应该可以解决这个问题，但是我尝试过的配置变体都没有对调试代码产生任何影响

编辑：仔细观察后，问题似乎是巴贝尔的传输太多，而不是不够。看起来来自

node\u modules/debug/dist/debug.js

的这段代码正在转换为有问题的rest参数

在：

输出：

我已尝试将源目录和调试模块都作为数组包含：

      {
        loader: 'babel-loader',
        test: [path.resolve(__dirname, 'src'), /node_modules\/debug/]
      },

我尝试了包括所有

.js

文件，但排除了大多数节点模块子目录

      {
        loader: 'babel-loader',
        test: /(\.jsx|\.js)$/,
        exclude: /node_modules\/(?!debug)/
      },

即使拆分为多个规则：

      {
        loader: 'babel-loader',
        test: /(\.jsx|\.js)$/,
        exclude: /node_modules/
      },
      {
        loader: 'babel-loader',
        test: /node_modules\/debug/
      },

具有同样的效果：

const shouldExclude = filename => {
  if (/my-project[\\\/]src/.test(filename)) return false;
  if (/my-project[\\\/]test/.test(filename)) return false;
  if (/my-project[\\\/]node_modules[\\\/]debug/.test(filename)) return false;

  return true;
};
...
  module: {
    rules: [{ test: /\.js$/, exclude: shouldExclude, use: ['babel-loader'] }],
  },

以下是最完整的配置文件，供参考

package.json

{
  "name": "my-js-library",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/plugin-transform-object-assign": "^7.8.3",
    "@babel/plugin-transform-parameters": "^7.9.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.0",
    "@babel/register": "^7.9.0",
    "@babel/runtime": "^7.9.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-add-module-exports": "^1.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^7.0.0-beta.3",
    "classlist-polyfill": "^1.2.0",
    "debug": "4.1.1",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-html": "^6.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "yargs": "^15.3.1"
  },
  "dependencies": {}
}

B.法律改革委员会

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "babel-plugin-add-module-exports",
    "transform-class-properties",
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-parameters"
  ]
}

webpack.config.js

const config = {
  mode: 'production,
  entry: __dirname + '/src/index.js',
  devtool: 'source-map',
  output: {
    path: __dirname + '/lib',
    filename: my-js-library.min.js,
    library: 'MyJsLibrary',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /node_modules\/debug/,
        loader: 'babel-loader',
      },
      {
        test: /(\.jsx|\.js)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
      },
    ],
  },
  stats: 'minimal',
  resolve: {
    modules: [path.resolve('./node_modules'), path.resolve('./src')],
    extensions: ['.json', '.js'],
  },
};

module.exports = config;

---

他们的回购协议中有一个问题，一些人提供了信息来修复。你看到了吗？@DvidSilva我还没有尝试过；谢谢不幸的是，

exclude

作为一个函数得到了相同的结果。我将添加上面的代码以供参考。我仔细查看了

node\u modules/debug/dist/debug.js

中的代码，现在我认为它毕竟正在被传输。似乎传输本身添加了“rest参数”。我认为。。。函数log（{var_控制台；return（控制台类型==“未定义”？“未定义”）：{u控制台类型（控制台））=='object'&&console.log&&&console.log&&console.log.log.apply（{u控制台，参数）；}正在更改为函数（n）{e.log=函数（…A）{return object==console&&console.log&&console.log（…A）}IE 11中的调试支持似乎有很多问题。我找到了一个，你可以参考它使用

覆盖

选项来指示babel处理

调试/***.js

。如果所有尝试都失败了，你可以尝试将调试版本降级到3.x.x，使其与IE 11兼容。有关更多信息，你可以参考。非常生动的比喻。我不知道

@babel/plugin syntax dynamic import

是否有效。第二个线程的作者给出了解决方案。您可以尝试其中的格式。此外，如果您有任何更新，请毫不犹豫地与我联系。他们的回购协议中有一个问题，一些人提供了修复信息。您看到了吗？@DvidSilva我还没有尝试过；谢谢。不幸的是，我在函数

exclude

中得到了相同的结果。我将添加上面的代码以供参考。我仔细查看了

node\u modules/debug/dist/debug.js

中的代码，现在我认为它毕竟正在被传输。似乎传输本身就是addin我认为…函数log（）{var_console；return（typeof console==“undefined”？“undefined”：{u typeof（console））===“object”&&console.log&&（{u console=console.log&&）.log.apply（{u console，arguments）；}正在被更改为函数（n）{e.log=function（…A）{return object==console&&console.log&&console.log（…A）的类型}IE 11中的调试支持似乎有很多问题。我找到了一个，你可以参考它使用

覆盖

选项来指示babel处理

调试/***.js

。如果所有尝试都失败了，你可以尝试将调试版本降级到3.x.x，使其与IE 11兼容。有关更多信息，你可以参考。非常生动的比喻。我不知道

@babel/plugin syntax dynamic import

是否有效。第二个线程的作者给出了解决方案。您可以尝试其中的格式。此外，如果您有任何更新，请随时与我联系。

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "babel-plugin-add-module-exports",
    "transform-class-properties",
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-parameters"
  ]
}

const config = {
  mode: 'production,
  entry: __dirname + '/src/index.js',
  devtool: 'source-map',
  output: {
    path: __dirname + '/lib',
    filename: my-js-library.min.js,
    library: 'MyJsLibrary',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /node_modules\/debug/,
        loader: 'babel-loader',
      },
      {
        test: /(\.jsx|\.js)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
      },
    ],
  },
  stats: 'minimal',
  resolve: {
    modules: [path.resolve('./node_modules'), path.resolve('./src')],
    extensions: ['.json', '.js'],
  },
};

module.exports = config;