1

JS ファイルの単純なファイル構造があります。

bundle.js
src
 |
 -- main.js
 -- forms
       |
       -- forms.js

私の main.js ファイルは次のようになります。

let forms = require('./forms/forms');

そして、forms.js ファイルは次のようになります。

export default class Forms {
    test = () => {
        alert('Forms.test() executed!');
    }
}

var forms = new Forms();
forms.test();

これにより、次のエラーがスローされます。

Hash: a1ed74e596de181cec27
Version: webpack 1.14.0
Time: 21592ms
                Asset    Size  Chunks             Chunk Names
./static/js/bundle.js  277 kB       0  [emitted]  main
+ 3 hidden modules

ERROR in ./static/js/src/forms/forms.js
Module build failed: SyntaxError: Unexpected token (4:6)

  2 | 
  3 | export default class Forms {
> 4 |   test = () => {
    |        ^
  5 |       alert('Forms.test() executed!');
  6 |   }
  7 | }

 @ ./static/js/src/main.js 4:12-36

test() メソッドが定義されている行について構文エラーが発生しています。babel-loader を追加すると、main.js ファイルで ES6 コードがトランスパイルされ、正しく実行されます。

私の webpack.config.js ファイルは次のようになります。

module.exports = {
  entry: './static/js/src/main.js',
  output: {
    filename: './static/js/bundle.js'
  },
  watch: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      }
    ],
  }
};

babel-loader は forms.js ファイルなどで正しく動作しませんか? 構成ファイルなどでファイルまたはそのフォルダーを除外していないのに、なぜ構文エラーが発生するのですか? 別のプロジェクトで書いたので、これが有効なJSであることはわかっていますが、うまくいきました。

ところで、importmain.js ファイルも機能しませんが、他の ES6 機能は機能しますか? それはこれと何か関係がありますか？

4

2 に答える 2

2

ES Class Fields & Static Propertiesは、ECMASCRECMAScript 2015 / 2016 の一部ではなく、ステージ 2 の提案です。

これを使用するには、babel を構成してClass properties transform.

クエリでプラグインnpm installだけを使用できます。Class properties transformbabel-loader

query: {
  presets: ['es2015'],
  plugins: ['transform-class-properties']
}

またはnpm install、ステージ 2 プリセットbabel-loaderをクエリにプリセットとして含めます。

query: {
  presets: ['es2015', 'stage-2']
}
于 2016-12-25T20:57:38.393 に答える
2

代わりに、通常のメソッドとして定義できます。

export default class Forms {
    test() {
        alert('Forms.test() executed!');
    }
}
于 2016-12-25T20:58:54.497 に答える