箭头函数语法不能与webpack一起使用？

JavaScript Webpack

宝儿

2020-06-02

我在react-redux上制作一个应用程序。我正在使用webpack捆绑和babel进行转译。当我尝试在代码中使用箭头功能时。它给我的错误是：

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

};

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

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

我的webpack配置文件如下所示：

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']
        }
      }
    ]
  }
};

并且我在package.json中使用以下babel软件包：

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

怎么了？

第4251篇《箭头函数语法不能与webpack一起使用？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
梅 2020.06.02

另外，如果您想适应新的babel节目，可以使用babel.config.jsfile代替.babelrc。这个想法就像webpack.config.jsfile 一样，但是用于babel配置。它的用法如下：

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

确保安装所有这些插件以成功编译。我应该说，通货膨胀本身只是建议对所有这些.babelrc文件都进行归档。但是你知道，我们不是每个人。

泡芙 2020.06.02

首先，您需要将.babelrc文件编辑为

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

第二npm install babel-plugin-transform-class-properties和babel-preset-es2016

镜风 2020.06.02

在我的应用程序中，此问题是由错误地将较少加载程序错误地添加为依赖包而不是devDependency引起的。

在package.json文件中将更少的加载程序从依赖项移至devDependencies可以解决此问题。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android