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

【问题标题】：Build javascript async/await with webpack 2 and babel-loader使用 webpack 2 和 babel-loader 构建 javascript async/await
【发布时间】：2017-04-13 23:33:50
【问题描述】：

我正在使用 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 配置使用 transform-async-to-generator 插件，在配置文件 webpack/prod.js 中带有行 loaders: ['babel-loader?presets[]=es2015&presets[]=stage-0&presets[]=react&plugins[]=transform-async-to-generator', 'eslint-loader']：

'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。

当我删除异步/等待代码部分时，构建成功。

我查看了解决方案 here 和 here，但无法让 async/await 代码的构建工作。

谁能帮我解决这个问题？非常感谢

【问题讨论】：

标签： node.js webpack async-await babel-loader

【解决方案1】：

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

"parser": "babel-eslint"

并安装babel-eslint:

npm install --save-dev babel-eslint

【讨论】：

谢谢，这解决了问题。我赞成你的回答，但由于我是菜鸟，所以它没有显示。