web-dev-qa-db-fra.com

Flèche La syntaxe de la fonction ne fonctionne pas avec le webpack?

Je fais une application sur react-redux. J'utilise webpack pour grouper et babel pour transpiler. Lorsque j'essaie d'utiliser la fonction flèche dans mon code. Cela me donne une erreur comme:

Module build failed: SyntaxError: Unexpected token (34:15)

};

> handleSubmit = (event) => {
                  ^
  event.preventDefault();

  this.props.dispatch(actions.addTodo(this.state.inputText));

Mon fichier de configuration webpack ressemble à ceci:

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/client.js'
  ],
  output: {
    path: require('path').resolve('./dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre']
        }
      }
    ]
  }
};

et j'utilise les packages babel suivants dans mon package.json:

 "babel-cli": "^6.6.5",
"babel-core": "^6.4.5",
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.1",

Qu'est-ce qui aurait mal tourné?

javascriptwebpackbabeljs
25
Ajay Gaur

Poignarder dans le noir, cette fonction est-elle dans une classe? Les fonctions fléchées qui sont membres d'une classe ne sont pas incluses dans ES2015 (ou 2016). Si vous voulez faire quelque chose comme:

class Foo {
  bar = (baz) => {
    console.log(baz);
  } 
}

Vous devrez inclure babel-transform-class-properties .

Dans votre exemple, vous devrez:

npm install --save-dev babel-plugin-transform-class-properties

et changez votre chargeur en

{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre'],
          plugins: ['transform-class-properties']
        }
      }
74
Joe Ruello

C'est exactement ce qui a fonctionné pour moi:

1) Installez les propriétés de classe babel-plugin-transform-class:

Sudo npm install --save-dev babel-plugin-transform-class-properties

2) Ajoutez des options (pas de requête) à vos règles:

module.exports = {
    ..........
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['env', 'react', 'es2015'],
                    plugins: ['transform-class-properties']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    ..........
};
4
Vlado

Aussi, si vous voulez vous habituer au nouveau show babel, vous pouvez utiliser babel.config.js fichier au lieu de .babelrc. L'idée est comme quelque chose comme webpack.config.js fichier, mais pour les configurations babel. Il est utilisé comme ci-dessous:

module.exports = {
  presets: [ "@babel/preset-env", "@babel/preset-react" ],
  plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties" ]
}

Assurez-vous d'installer tous ces plugins pour une compilation réussie. Je devrais dire que babel lui-même a juste recommandé de faire toutes ces choses dans .babelrc fichier à chacun. Mais vous savez, nous ne sommes pas tous.

3
a_m_dev

Vous devez d'abord modifier le fichier .babelrc en

{
 "presets": ["react", ["es2016"]],
 "plugins": [
     "babel-plugin-transform-class-properties"
  ]
}

Seconde npm install babel-plugin-transform-class-properties et babel-preset-es2016

2
wenningzhang