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

Question

我正在使用 webpack 2.3.3 使用 async/await javascript 语法构建我的 node.js 应用程序。使用 babel-loader 6.4.1 完成转译。我的 package.json 看起来像这样：

{ (...)
  "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:

中使用带有行

loaders: ['babel-loader?presets[]=es2015&presets[]=stage-0&presets[]=react&plugins[]=transform-async-to-generator', 'eslint-loader']

的 transform-async-to-generator 插件

'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) { (...) } 的行上失败并出现错误 Parsing error: Unexpected token function.

当我删除 async/await 代码部分时，构建成功。

我查看了解决方案 and ，但无法构建 async/await 代码。

有人可以帮我解决这个问题吗？非常感谢

Answer 1

解析错误发生在eslint-loader，因为默认的eslint解析器不理解async和await。您必须按照 Specifying Parser 中的说明使用 babel-eslint。在您的 eslint 配置中添加：

"parser": "babel-eslint"

并安装 babel-eslint:

npm install --save-dev babel-eslint

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

Build javascript async/await with webpack 2 and babel-loader

node.js

async-await

webpack

babel-loader