原生 await/async 和 webpack

Question

我正在为 chrome 55+ 开发一个扩展，并使用 webpack 2 打包所有内容。问题是我开始使用异步和等待。

我得到的错误是：

ERROR in content_script.js from UglifyJs
Unexpected token: keyword (function) [./content_script.js:1,0]
[content_script.js:1630,6]

对于这样一个简单的文件：

async function test() {

}

我不想使用 babel 将其转换为非本机异步代码，因为只针对 chrome 55+ 任何方式，但我似乎无法找到一种方法来配置 UglifyJs 来接受这个，或者使用支持这个的不同版本。

我的 webpack 配置：

var path = require("path");
var webpack = require("webpack");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: {
        "content_script": [
            "./content_script.js"
        ],
        "browser_action": [
            "./browser_action.js"
        ],
        "background": [
            "./background.js"
        ],
        "options": [
            "./options.js"
        ]
    },
    node: {
        fs: "empty"
    },
    output: {
        path: __dirname + "/dist",
        filename: "[name].js"
    },
    plugins: [
        new CopyWebpackPlugin([
            { from: "manifest.json" }
        ]),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "browser_action_popup.html"),
            inject: true,
            chunks: ["browser_action"],
            hash: false,
            filename: "browser_action_popup.html"
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "options.html"),
            inject: true,
            chunks: ["options"],
            hash: false,
            filename: "options.html"
        })
    ]
};

Answer 1

UglifyJs 还不了解 ES2015+ 语法。作为替代方案，您可以使用babili，它适用于 babel 理解的所有语法。

在你的 webpack 配置中有一个babili-webpack-plugin 可以像webpack.optimize.UglifyJsPlugin 一样使用。

const BabiliPlugin = require('babili-webpack-plugin');

module.exports = {
  // ...

  plugins: [
      new BabiliPlugin(options)
  ]
};

有关可用选项的列表，请参阅babel-preset-babili options。

如果您不想包含 webpack 插件，也可以使用 babili CLI。