有没有办法使用 babel 使用不同的配置生成多个转译文件?

Question

我对NPM脚本和Babel都相当陌生。我以前使用过 Gulp，但我正在尝试转向 Webpack + NPM 脚本，甚至仅在不需要 Webpack 时才构建 NPM。这是后者的一个例子。

我想

• 使用我的主要 ES6+ JS 文件src/main.js

• 使用 Babel 生成一个相当现代的脚本文件，docs/main.js使用以下目标

  ：

  browsers: [
  'Chrome >= 60',
  'Safari >= 10.1',
  'iOS >= 10.3',
  'Firefox >= 54',
  'Edge >= 15',
  ],
  

• 再次使用 Babel 生成更"遗留"版本的脚本，docs/main.legacy.js使用以下目标

  ：

  "browsers": ["> 1%, not ie 11, not op_mini all"]

• 使用 npm 脚本从中创建两个构建任务，稍后我可以将其放入一个命令中，例如npm run build

在阅读了 Philip Walton 关于在他的构建过程中创建多个目标的文章后，我想知道：

1. 只有当我不需要 Webpack 时，NPM 脚本才可以做到这一点吗？
2. 启用此类功能的建议操作过程是什么？

---

我的尝试：package.json

"scripts": {
"buildModern": "babel src/main.js -o docs/main.js -presets=env",
"buildLegacy": "babel --no-babelrc src/main.js > docs/main.legacy.js",
"build": "echo '=> Building Source Files' && buildModern && buildLegacy"
},

Answer 1

因此，对于将来可能偶然发现并希望做类似事情的人，这就是我想出的。感谢丹的建议。

1. 您需要创建一个.babelrc文件，并在其中使用"env"选项，该选项将包含任意数量的环境。
2. 设置BABEL_ENV=name将name替换为配置文件中指定的名称之一。

3. 接着用你的 babel cli 命令或任何你想做的事情。

   cross-env BABEL_ENV=modern babel src/js/main.js -o docs/js/main.min.js && echo Building ES6+ Files...`
   

4. 确保根据需要安装必要的 npm 依赖项。希望这有帮助。

这是我的配置文件的示例

{
"env": {
"legacy": {
"presets": [
["minify"],
["env", {
"targets": {
"browsers": ["> 1%, not ie 11, not op_mini all"]
}
}]
]
},
"modern": {
"presets": [
["minify"],
["env", {
"targets": {
"browsers": [
"Chrome >= 60",
"Safari >= 10.1",
"iOS >= 10.3",
"Firefox >= 54",
"Edge >= 15"
]
}
}]
]
}
}
}

Answer 2

拥有多个 babel 配置的一种方法是在.babelrc文件中使用不同的环境(通过env选项(，并通过在每个 NPM 脚本中设置 BABEL_ENV 变量来定位它们。

仅 Babel 的方法适用于转译单个 JS 文件，但如果您想导入文件中的其他模块并使其在浏览器中工作，您将需要一个捆绑器，例如 Webpack 或 Rollup。

编辑：请参阅下面的基诺的文章。