使用webpack 2和babel-loader構建javascript async/await

Question

我正在使用webpack 2.3.3以async/await javascript語法構建我的node.js應用程序。運輸使用babel-loader 6.4.1完成。 我package.json看起來是這樣的：

'use strict'; 

require('babel-polyfill'); 
var webpack = require('webpack'); 
var path = require('path'); 
var fs = require('fs'); 

var nodeModules = {}; 

fs.readdirSync('node_modules') 
    .filter(function(x) { 
     return ['.bin'].indexOf(x) === -1; 
    }) 
    .forEach(function(mod) { 
     nodeModules[mod] = 'commonjs ' + mod; 
    }); 

var serverConfig = { 
    entry: ['babel-polyfill', './src/server'], 
    target: 'node', 
    externals: nodeModules, 
    output: { 
     path: path.resolve(__dirname, '../dist/assets/'), 
     filename: 'server.js' 
    }, 
    plugins: [ 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { warnings: false } 
     }) 
    ], 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       loaders: ['babel-loader?presets[]=es2015&presets[]=stage-0&presets[]=react&plugins[]=transform-async-to-generator', 'eslint-loader'], 
       exclude: /node_modules/ 
      } 
     ] 
    } 
}; 

module.exports = [ clientConfig, serverConfig ]; 

當我運行npm run build，構建含async function foo(arg) { (...) }錯誤線失敗：

{ (...) 
    "scripts": { 
    "build": "rm -Rf dist; webpack -p --progress --colors --display-error-details --config webpack/prod.js", 
    "postinstall": "npm run build", 
    "start": "node dist/assets/server.js" 
    }, 
    (...) 
    "dependencies": { 
    "babel-cli": "6.24.1", 
    "babel-core": "6.24.1", 
    "babel-loader": "6.4.1", 
    "babel-plugin-transform-async-to-generator": "6.24.1", 
    "babel-polyfill": "6.23.0", 
    "babel-preset-es2015": "6.24.1", 
    "babel-preset-react": "6.24.1", 
    "babel-preset-stage-0": "6.24.1", 
    "babel-preset-stage-1": "6.24.1", 
    "eslint": "3.19.0", 
    "eslint-loader": "1.7.1", 
    "eslint-plugin-react": "6.10.3", 
    (...) 
    "webpack": "2.3.3" 
    }, 
    (...) 
} 

我的WebPack配置在配置文件webpack/prod.js使用transform-async-to-generator插件與線loaders: ['babel-loader?presets[]=es2015&presets[]=stage-0&presets[]=react&plugins[]=transform-async-to-generator', 'eslint-loader']Parsing error: Unexpected token function。

當我刪除async/await代碼部分時，構建成功。

我看過解決方案here和here，但無法使異步/等待代碼的構建工作。

有人可以幫我嗎？ Thx很多

Answer 1

解析錯誤發生在eslint-loader中，因爲默認的eslint解析器不理解async和await。您必須使用babel-eslint，如Specifying Parser中所述。在您的eslint配置增加：

"parser": "babel-eslint" 

並安裝babel-eslint：

npm install --save-dev babel-eslint