web-dev-qa-db-fra.com

Babel ne transpile pas les fonctions flèches (Webpack)

Lors de l'exécution de webpack et de babel, le bundle.js résultant contient toujours des fonctions fléchées. Cela me donne une erreur de syntaxe lors de l'exécution dans Internet Explorer 10. Je voudrais que babel remplace les fonctions fléchées par des fonctions normales que IE peut exécuter.

Mon package.json a les devDependencies suivants:

"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"
}

Mon webpack.config.js ressemble à ceci:

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

Mon . Babelrc ressemble à ceci:

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

Pour transpiler, j'exécute la commande:

npm run build --production

Et j'obtiens la sortie suivante dans la console:

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"}

Les fonctions de flèche transform-es2015 sont répertoriées comme incluses, mais lorsque j'ouvre le bundle.js généré, je peux, par exemple, voir ce qui suit:

...

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

Ce qui précède utilise une fonction de flèche et produit une erreur de syntaxe dans Internet Explorer. D'autres trucs ES6 comme '...' sont transposés.

Qu'est-ce que je fais mal?

javascriptwebpackbabel
11
Henrik

Je pense qu'un problème est lié à chaîne de requête car il est écrit en ES6 et non transposé en ES5. Essayez de rétrograder la version de 6 à 5.

yarn add [email protected]
35
Serhii Levchenko

il semble être lié au plugin 'transform-es2015-function-name'. voir https://github.com/babel/babel/issues/4782#issuecomment-271367012 pour plus de détails. Donc, l'exclusion du plugin devrait faire l'affaire.

0
Johannes