webpackで非同期関数を解析する問題

Question

新しいasync/await構文を使用しているjavascriptファイルを解析するためにwebpackを取得しようとしていますが、解析エラーが発生し続けます。

module.exports = { 
    entry: { 
    foo: './foo.js' 
    }, 
    output: { 
    filename: 'webpack-compiled.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
     } 
    ] 
    } 
} 

マイpackage.jsonファイル：

{ 
    "name": "async-func-test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "foo.js", 
    "scripts": { 
    "buildWithBabel": "babel foo.js --out-file babel-compiled.js", 
    "buildWithWebpack": "webpack --progress --colors" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-cli": "^6.18.0", 
    "babel-core": "^6.18.2", 
    "babel-loader": "^6.2.8", 
    "babel-plugin-syntax-async-functions": "^6.13.0", 
    "webpack": "^1.13.3" 
    } 
} 

マイbabel.rcファイル：

{ 
    "plugins": [ 
    "syntax-async-functions" 
    ] 
} 

そして、fooのここ

は私のwebpack.config.jsファイルです.jsファイル：

async function asyncFunc() { 
    return 123 
} 

asyncFunc().then(x => console.log(x)) 

npmスクリプト 'buildWithBabel'を実行すると、エラーなしで正常に実行され、適切な出力を持つbabel-compiled.jsが作成されます。私はちょうどそれを解析し、非同期機能を変換する必要はありません

ERROR in ./foo.js 
Module parse failed: C:\Users\Redark\Desktop\asyncFuncTest\node_modules\babel-loader\lib\index.js!C:\Users\Redark\Desktop\asyncFuncTest\foo.js Unexpected token (1:6) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (1:6) 

：私はNPMスクリプト「buildWithWebpack」を実行する場合

はしかし、私は、次のエラーメッセージが表示されます。私はそれが "構文非同期関数"プラグインを.babelrcの右側で使うべきであるので、なぜwebpackのために働いていないのか分かりません。

Answer 1

も使用する必要があります。syntax-async-functionsは、Babelが入力を解析してから離しておくことができます。 WebpackはまだES8の構文を理解していません。そのため、翻訳されずに失敗します。