如何使用Webpack生成ES2017代码？旧Firefox扩展迁移技术问询

嘿，看你正在把旧Firefox扩展迁移到ES2017，已经搭好了基础依赖和测试代码，我来帮你把这些配置和代码捋顺，确保能顺利跑起来：

一、依赖配置的优化调整 #

你当前的devDependencies已经覆盖了核心工具，但有个小优化点：babel-preset-es2017其实可以被babel-preset-env替代——因为env支持根据目标环境按需编译，灵活性更高，而且它已经包含了ES2017的所有特性（比如你用到的async/await）。

调整后的devDependencies可以改成这样：

"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.4",
  "babel-preset-env": "^1.6.1",
  "eslint": "^4.19.0",
  "gulp": "^4.0.0",
  "web-ext": "^2.5.0",
  "web-ext-types": "^2.0.1",
  "webpack": "^4.1.1",
  "webpack-stream": "^4.0.2"
}

接下来要配置.babelrc文件，指定编译目标为Firefox（毕竟是Firefox扩展），让babel只编译浏览器不支持的特性：

{
  "presets": [
    ["env", {
      "targets": {
        "firefox": "57" // 从Firefox 57开始对ES2017支持已经很完善了
      },
      "useBuiltIns": "usage" // 自动按需引入polyfill，避免打包冗余代码
    }]
  ]
}

二、测试代码的注意事项 #

你的测试类代码写得没问题，但有两个细节要留意：

export class Test {
  async hello(param) {
    console.debug('Test', browser);
    return `Hello ${param}, how are you?`;
  }
}

• browser是WebExtensions API的全局对象，只有在Firefox扩展的上下文里才会存在，用web-ext运行扩展时会自动注入这个对象，单独测试的话可能需要模拟它
• async/await语法已经被babel处理，只要前面的babel配置正确，编译后就能在目标Firefox版本中正常运行

三、构建流程的示例配置 #

结合gulp和webpack-stream，你可以写一个简单的构建任务来编译代码：

const gulp = require('gulp');
const webpack = require('webpack-stream');
const webExt = require('web-ext').default;

// 编译JS代码到dist目录
gulp.task('build', () => {
  return gulp.src('src/index.js') // 你的入口文件
    .pipe(webpack({
      mode: 'development',
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
          }
        ]
      },
      output: {
        filename: 'bundle.js'
      }
    }))
    .pipe(gulp.dest('dist'));
});

// 一键编译并运行扩展
gulp.task('run', gulp.series('build', () => {
  return webExt.run({
    sourceDir: 'dist', // 指向编译后的目录
    firefox: 'nightly' // 可选，指定Firefox版本，比如nightly或stable
  });
}));

这样配置后，你只需要运行gulp run就能编译代码并启动Firefox加载扩展，测试你的ES2017代码了。

内容的提问来源于stack exchange，提问作者Nabor