Babel Runtime transform使用

2017-12-11 17:50:23Tags: javascript webpack

众所周知,Babel 是一个 JavaScript 编译器,Babel 通过语法转换器支持最新版本的 JavaScript,当我们在多个入口文件中使用了相同的新语法,babel会给每个文件引用这些重复的文件,那么这是没必要的,babel-plugin-transform-runtime插件就是为处理这个问题而生的,当然此插件的功能不仅限于此。

阅读本文需要有webpack和babel配置基础

Babel 默认只转换新的 JavaScript 语法,如async await,而不转换新的 API和全局对象上的静态方法,如"foobar".includes("foo"),如果要支持这些方法就必须引用babel-polyfill了。

Babel在编译async await等此类新语法时,会生成一些替换文件,如果每个入口文件都有用到这些方法,那么babel就会在每个文件中都引用这些语法编译文件,这些就形成了代码的冗余,为些Babel官方为解决这个问题便开发了babel-plugin-transform-runtime,这个插件的意思就是说,在打包的时候会自动把复用的方法独立出来,组成一个公共库,便于入口文件调用,这样就能解决代码的冗余问题,提升效率。

这只是其功能之一,还有一个重要的功能就是,相较于babel-polyfill污染全局对象,transform-runtime的做法则是独立出来一个作用域,如:当我们使用promise时,babel-polyfill会直接挂载在全局对象上,而后者则是会单独建一个作用域,以避免污染全局

使用:

npm install --save-dev babel-plugin-transform-runtime
// 或
yarn add -D babel-plugin-transform-runtime

并且同时要引入

npm install --save babel-runtime
// 或
yarn add babel-runtime

配置.babelrc

{
  "plugins": ["transform-runtime"]
}

通常我们直接这些配置就行了,如果你做一些特殊处理,可以添加一些选项设置:

{
  "plugins": [
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }]
  ]
}

选项详情请参数官方文档

我的一些实践,如,我不想使用babel的promise,而是在head里直接在cdn引入了es6-promise第三方垫片,那么为了不重复引入,这里就需要在webpack配置一下

externals:{
    'babel-runtime/core-js/promise': 'Promise'
}

externals选项的用法就是,如果你不想打包某些库,却又想在项目中用到,如jQuery等等,那么就可这样配置,其他库也是

externals:{
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
    'jquery': 'jQuery',
    'babel-runtime/core-js/promise': 'Promise'
}

详细用法请查看官方文档

如果想使用最新的语法,则需要提升stage的级别

npm install --save-dev babel-preset-env
npm install -D babel-preset-stage-0
// 或
yarn add -D babel-preset-env
yarn add -D babel-preset-stage-0

.babelrc

{
    "presets": [
        [
            "env", {
                "modules": false
        ],
        "stage-0"
    ],
    "plugins": [
        "transform-runtime"
    ]
}