logo标签列表

Babel未转译箭头函数（Webpack）

javascriptwebpackbabeljs
16

运行webpack和babel后，生成的bundle.js文件仍然包含箭头函数。这使得在Internet Explorer 10中运行时出现语法错误。我希望babel能将箭头函数替换为IE可以运行的普通函数。

我的package.json文件具有以下devDependencies：

"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: './'
  }
};

我的.babelrc文件看起来像这样:

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

进行转译，我执行以下命令：

npm run build --production

在控制台中将会看到以下输出：

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的内容如“...”会被转译。

我做错了什么？

我认为babellrc应该是对象而不是数组？文档 - Tan Duong
好的，它是一个包含数组中礼物的对象。 - Henrik
是的，扩展语法似乎可以工作，并且在我生成bundle.js时没有出现任何错误。 - Henrik
使用以下代码： use: [ { loader: 'babel-loader', options: { presets: ['es2015', 'react'] }, } ]尝试使用 es2015 而不是 stage。 - Alexander Gorelik
谢谢您的建议。我尝试了，但没有任何改变。此外，es2005现在已经过时了。我需要stage-3来编译扩展语法。 - Henrik
显示剩余2条评论
5个回答
46

我认为问题与 query-string 相关，因为它是用ES6编写的，而没有转译成ES5。尝试将版本从6降级到5。

yarn add query-string@5.1.1
4
谢谢您的指引！那么使用Webpack和Babel配置的时候，不会将ES6+的包/库转译成ES5/3吗？ - Vetterjack
1
谢谢！作者的决定有些愚蠢，不过也不应该抱怨，毕竟这是开源的 :) - isah
1
浪费了2天时间才找到这个根本原因。:(。更改版本后它终于可以工作了。 - RICKY KUMAR
1
你救了我们的一天。非常感谢！ - Aline Vianna
4
您可以将它添加到“babel-loader”的规则中作为“include”，无需降级。 - Fabian von Ellerts
显示剩余7条评论
1
0
我在汇编中遇到了箭头函数的问题，这导致了Internet Explorer的崩溃。现在有一个解决方案 - 我们可以强制使用带有babel插件的ES包来替换箭头函数。
module.exports = {
    module: {
        rules: {
            {
                test: /\.(js|cjs|mjs|tsx|jsx)$/,
                include: [
                    /node_modules[/\\]query-string/,
                    /node_modules[/\\]abort-controller/,
                    /node_modules[/\\]phoenix/,
                ],
                loader: require.resolve("babel-loader"),
                options: {
                    cacheDirectory: true,
                    presets: ["@babel/preset-env"],
                    plugins: [
                        "@babel/plugin-proposal-class-properties",
                        "@babel/plugin-proposal-object-rest-spread",
                        "@babel/plugin-proposal-optional-chaining",
                        "@babel/plugin-proposal-nullish-coalescing-operator",
                        "@babel/plugin-transform-arrow-functions", // <--- at least this one
                    ],
                },
            },
            // ... rest of your rules
        }
    }
}
-2
-2
请尝试使用preset-env依赖项。 对我来说，它运行得非常好。
{
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader',
   options: {
      presets: ["@babel/preset-env"]
   }
},
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接