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

时间:2018-08-25 09:42:37

标签: npm webpack ecmascript-6 babeljs npm-scripts

我对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's article有关在其构建过程中创建多个目标的信息之后,我想知道:

  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"
},

2 个答案:

答案 0 :(得分:1)

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

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

编辑:请参阅下面的Keno文章。

答案 1 :(得分:1)

因此,对于将来可能会偶然发现希望做类似事情的人,这就是我的想法。向Dan表示感谢。

  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"
                        ]
                    }
                }]
            ]
        }
    }
}