有什么方法可以使用不同的配置和 babel 生成多个转译文件吗？

Question

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

我愿意

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

使用 babel 生成相当现代的脚本文件 docs/main.js 使用如下目标：

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

再次使用 babel 来生成更多 'legacy' 版本的脚本 docs/main.legacy.js 使用如下目标：

"browsers": ["> 1%, not ie 11, not op_mini all"]
使用 npm 脚本从中创建两个构建任务，稍后我可以将它们放入一个命令中，例如 npm run build

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

仅当我不需要 Webpack 时才可以使用 NPM 脚本吗？
启用此类功能的推荐操作步骤是什么？

我的尝试：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

拥有多个 babel 配置的一种方法是使用 different environments in your .babelrc file（通过 env 选项）并通过在每个 NPM 脚本中设置 BABEL_ENV 变量来定位它们。

仅使用 Babel 的方法可以很好地转换单个 JS 文件，但如果您想在文件中导入其他模块并使其在浏览器中运行，则需要 Webpack 或 Rollup 等捆绑器。

编辑： 请参阅下面 Keno 的评论。

Answer 2

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

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

用你的 babel cli 命令或任何你想做的事跟进。例如。

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

确保根据需要安装必要的 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"
                        ]
                    }
                }]
            ]
        }
    }
}

有什么方法可以使用不同的配置和 babel 生成多个转译文件吗？

Is there any way to generate multiple transpiled files using different configs with babel?

npm

ecmascript-6

webpack

babeljs

npm-scripts