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.optimize.UglifyJsPlugin一样使用babili-webpack-plugin。

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

module.exports = {
  // ...

  plugins: [
      new BabiliPlugin(options)
  ]
};

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

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

Native await / async和webpack

1 个答案: