我对NPM脚本和Babel还是陌生的。我以前使用过Gulp,但我正尝试转向Webpack + NPM脚本,或者甚至仅在不需要Webpack时才构建NPM。这就是后者的一个例子。
我想
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 run build
在阅读了Philip Walton's article有关在其构建过程中创建多个目标的信息之后,我想知道:
我的尝试: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"
},
答案 0 :(得分:1)
具有多个babel配置的一种方法是使用different environments in your .babelrc
file(通过env
选项)并通过在每个NPM脚本中设置BABEL_ENV变量来定位它们。
仅Babel的方法可以很好地用于转换单个JS文件,但是如果您想在文件中导入其他模块并使其在浏览器中运行,则将需要打包器,例如Webpack或Rollup。
编辑:请参阅下面的Keno文章。
答案 1 :(得分:1)
因此,对于将来可能会偶然发现希望做类似事情的人,这就是我的想法。向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"
]
}
}]
]
}
}
}