web-dev-qa-db-ja.com

WebpackでArrow Function構文が機能しませんか？

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

何が間違っていただろうか？

javascriptwebpackbabeljs
25
Ajay Gaur

暗闇の中で突き刺す、この関数はクラス内にあるのか？クラスのメンバーである矢印関数は、ES2015（または2016）には含まれていません。次のようなことをしたい場合：

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

babel-transform-class-properties を含める必要があります。

この例では、次のことが必要です。

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

ローダーを

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

これはまさに私のために働いたものです：

1）babel-plugin-transform-class-propertiesをインストールします：

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

2）ルールにオプション（クエリではなく）を追加します。

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

また、新しいbabelショーに慣れたい場合は、babel.config.jsの代わりに.babelrcファイルを使用できます。アイデアはwebpack.config.js fileのようなものですが、babel構成用です。以下のように使用されます。

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

正常にコンパイルするには、これらのプラグインをすべてインストールしてください。 babel自体は、これらすべてを.babelrcファイルですべて実行することをお勧めしていると言っておく必要があります。しかし、あなたは知っている、私たちはすべてではありません。

3
a_m_dev

まず、.babelrcファイルを編集して、

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

2番目のnpm install babel-plugin-transform-class-propertiesおよびbabel-preset-es2016

2
wenningzhang