web-dev-qa-db-ja.com

バベルが矢印関数をトランスコンパイルしない（Webpack）

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のものはトランスコンパイルされます。

私は何を間違えていますか？

javascriptwebpackbabel
11
Henrik

問題はES6で書かれており、ES5に変換されていないため、問題は query-string に関連していると思います。バージョンを6から5にダウングレードしてみてください。

yarn add [email protected]
35
Serhii Levchenko

「transform-es2015-function-name」プラグインに関連しているようです。詳細については、 https://github.com/babel/babel/issues/4782#issuecomment-271367012 を参照してください。そのため、プラグインを除外することで仕事ができるはずです。

0
Johannes