使用webpack解析異步功能的問題

Question

我正在嘗試讓webpack解析使用新的async / await語法的javascript文件，但它一直給我一個解析錯誤。

這是我的webpack.config.js文件：

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.js文件：

async function asyncFunc() {
  return 123
}

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

如果我運行npm腳本'buildWithBabel'，它可以正常運行且沒有錯誤，並創建具有正確輸出的babel-compiled.js。

但是，如果我運行npm腳本“ buildWithWebpack”，則會收到以下錯誤消息：

 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) 

我不需要轉換異步函數，只需對其進行解析即可。 我不確定為什么它不適用於webpack，因為它應該使用.babelrc中的“ syntax-async-functions”插件，對嗎？

Answer 1

您還需要使用transform-regenerator插件 ， syntax-async-functions僅允許Babel解析輸入（然后將其保留）。 Webpack尚不了解ES8語法，這就是為什么如果不對它們進行編譯就會失敗。