Javascript 巴别塔不传输箭头功能（网页包）

运行webpack和babel时，生成的bundle.js仍然包含箭头函数。在Internet Explorer 10中运行时，这会导致语法错误。我想巴贝尔取代正常的功能，IE可以运行的箭头功能

Mypackage.json具有以下特性：

"devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.4",
  "babel-preset-env": "^1.6.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babel-preset-stage-1": "^6.24.1",
  "css-loader": "^0.28.9",
  "imports-loader": "^0.7.1",
  "style-loader": "^0.19.1",
  "webpack": "^3.11.0",
  "webpack-dev-server": "^2.11.2"
}

我的webpack.config.js如下所示：

module.exports = {
  entry: [
    'babel-polyfill',
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
    ],
  },
  resolve: {
    enforceExtension: false,
    extensions: ['.js', '.jsx']
  },
  devServer: {
    host: '0.0.0.0',
    port: 5000,
    historyApiFallback: true,
    contentBase: './'
  }
};

{ 
  "presets": 
  [
    ["env", { "targets": {"browsers": ["last 2 versions"]}, "debug": true }], 
    "react", 
    "stage-3"
  ]
}

我的.babelrc如下所示：

module.exports = {
  entry: [
    'babel-polyfill',
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
    ],
  },
  resolve: {
    enforceExtension: false,
    extensions: ['.js', '.jsx']
  },
  devServer: {
    host: '0.0.0.0',
    port: 5000,
    historyApiFallback: true,
    contentBase: './'
  }
};

{ 
  "presets": 
  [
    ["env", { "targets": {"browsers": ["last 2 versions"]}, "debug": true }], 
    "react", 
    "stage-3"
  ]
}

要进行传输，我运行以下命令：

npm运行构建--生产

我在控制台中得到以下输出：

Using targets:
{
  "chrome": "62",
  "android": "4.4.3",
  "edge": "15",
  "firefox": "56",
  "ie": "10",
  "ios": "10.3",
  "safari": "10.1"
}

Modules transform: commonjs

Using plugins:
  check-es2015-constants {"android":"4.4.3","ie":"10"}
  transform-es2015-arrow-functions {"android":"4.4.3","ie":"10"}
  transform-es2015-block-scoped-functions {"android":"4.4.3","ie":"10"}
  transform-es2015-block-scoping {"android":"4.4.3","ie":"10"}
  transform-es2015-classes {"android":"4.4.3","ie":"10"}
  transform-es2015-computed-properties {"android":"4.4.3","ie":"10"}
  transform-es2015-destructuring {"android":"4.4.3","edge":"15","ie":"10"}
  transform-es2015-duplicate-keys {"android":"4.4.3","ie":"10"}
  transform-es2015-for-of {"android":"4.4.3","ie":"10"}
  transform-es2015-function-name {"android":"4.4.3","edge":"15","ie":"10"}
  transform-es2015-literals {"android":"4.4.3","ie":"10"}
  transform-es2015-object-super {"android":"4.4.3","ie":"10"}
  transform-es2015-parameters {"android":"4.4.3","ie":"10"}
  transform-es2015-shorthand-properties {"android":"4.4.3","ie":"10"}
  transform-es2015-spread {"android":"4.4.3","ie":"10"}
  transform-es2015-sticky-regex {"android":"4.4.3","ie":"10"}
  transform-es2015-template-literals {"android":"4.4.3","ie":"10"}
  transform-es2015-typeof-symbol {"android":"4.4.3","ie":"10"}
  transform-es2015-unicode-regex {"android":"4.4.3","ie":"10"}
  transform-regenerator {"android":"4.4.3","ie":"10"}
  transform-exponentiation-operator {"android":"4.4.3","ie":"10"}
  transform-async-to-generator {"android":"4.4.3","ie":"10"}
  syntax-trailing-function-commas {"android":"4.4.3","ie":"10"}

transform-es2015-arrow-functions列为已包含，但当我打开生成的bundle.js时，例如，我可以看到以下内容：

...

function encoderForArrayFormat(options) {
    switch (options.arrayFormat) {
        case 'index':
            return (key, value, index) => {
                return value === null ? [
                    encode(key, options),
...

上面使用了箭头函数，并在Internet Explorer中产生语法错误。其他ES6内容，如“…”会被传输

---

我做错了什么？

我认为一个问题与ES6相关，因为它是用ES6编写的，没有传输到ES5。尝试将版本从6降级到5

yarn add query-string@5.1.1

---

它似乎与“transform-es2015-function-name”插件有关。 有关详细信息，请参阅。

---

因此排除插件应该可以完成这项工作。

请尝试使用预设的env依赖项。 这对我很管用

{
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader',
   options: {
      presets: ["@babel/preset-env"]
   }
},

---

我认为babellrc应该是对象而不是数组？嗯，它*是一个包含数组中的礼物的对象。啊，我明白了，

spread函数

可以传输，spread语法似乎有效，我在生成bundle.js时没有收到任何错误。使用：[{loader:'babel loader'，选项：{预设：['es2015'，'react']}，}]尝试使用es2015而不是stage@SerhiiLevchenko感谢您的提示！所以带有babel安装程序的webpack不会将ES6+包/库传输到ES5/3？谢谢！作者的愚蠢决定，不应该抱怨，它是开源的：）浪费了2天时间来找到这个根本原因：（.它在更改版本后起作用。非常感谢！@SerhiiLevchenko您只需将其添加到

babel loader

规则中，即

包含

，无需降级。