苦逼前端

迟迟未到的babel-preset-env@2

Javascript2018-04-24 18:20

babel-preset-env之前官方github的release列表中可以看到,距离可追溯的第一个2.0的alpha版本v2.0.0-alpha.4 (2017-04-07)已经过去了382天,在经历了几十个alpha版本和几个beta版本后版本号变成了7.0.0-beta.3,与之对应的babel-core也接连发布了多个7.0.0的alpha和beta版本,目前也已经到了7.0.0-beta.3。猜测接下来应该会和babel@7一起发布吧。

而我们在webpack中使用的babel-loader也发布了babel-loader@^8.0.0-beta.x来使用最新的babel-preset-env@7.xbabel-core@7.x。等这些真正发布了我们就可以实现只配置.babelrc中的targets来实现针对特定浏览器的高级语法的翻译和native methodspolyfill了。

我们先来试试这些将要正式发布的beta版本,几个关键的配置:
package.json

"devDependencies": {
    "@babel/core": "^7.0.0-beta.42",
    "@babel/preset-env": "^7.0.0-beta.42",
    "babel-loader": "^8.0.0-beta.2",
    "babel-polyfill": "^6.26.0",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^2.11.2"
}

.babelrc

{
    "presets": [
        [
            "@babel/preset-env", 
            {
                targets: {
                    "browsers": ["safari >= 7", "ie >= 9"],
                    "node": "6.10"
                },
                useBuiltIns: "usage"
            }
        ]
    ]
}

以上配置就会将代码翻译成支持safari >= 7ie >= 9node > 6.10这些环境的代码,并且不是全量的翻译,而是根据实际代码中有没有使用到需要翻译和polyfill的代码,也就是说不会产生冗余代码,请看完整示例

在测试代码中我们使用了IE9所不支持的String.prototype.includes, 由于在.babelrc中指定了需要支持到IE9,所以我们可以看到翻译后的代码自动加入了对该API的支持,而并没有加入对其他未用到的API的支持,如String.prototype.padStart

细心的同学可能会发现,babel-corebabel-polyfill好像并没有使用到,但是他们确实是需要安装的,因为babel-preset-env只是检测了需要支持的环境以及翻译的配置(最新版本应该也执行了部分翻译,还没仔细看),真正执行翻译代码的是babel-core,而babel-polyfill则是提供了native methodspolyfill部分的代码,如String.prototype.padStartArray.prototype.includes等等。

评论(0)
  • 暂无评论,求挽尊...
还可输入200个字