Babel 全家桶 about blog HOT 23 OPEN

@xiaozhouwu

babel-polyfill 内部实现包含了所有的polyfill，而且部分polyfill是通过改变全局对象的方式。使用的方式也是直接在你的入口文件中去引入babel-polyfill。
babel-runtime及其插件babel-plugin-transform-runtime，会在babel对你的代码编译的过程中，分析你的代码，如果用到了一些新的API，需要引入polyfill的代码，会自动帮你引入在core-js或者regenerator.js中的shim代码。babel-plugin-transform-runtime这个插件主要是做了一层映射，映射到babel-runtime内引用的core-js或regenerator.js中具体对应的helper:

如果你使用了一些新的实例上的方法，例如：

const str = [1, 2, 3]
str.includes(2)

像这种实例上添加的新的方法，仅仅用core-js中的shim是没法解决的。这个时候必须要引入babel-polyfill。

babel-runtime及其插件babel-plugin-transform-runtime事实上就是按需去引入你需要的helper，而babel-polyfill是全部引入进去，从某种程度上说，确实比全部引入babel-polyfill最终打出的包更小。

from blog.

@lcoder 对，一个bundle里面一个但不用太在意，这些helper的体积很小，用这些helper换来的是自动引入polyfill的开发体验

from blog.

Up!

from blog.

cool

from blog.

请问一下作者，babel-runtime不污染全局，用到什么需要polyfill的api需要手动引入，比如promise；而babel-plugin-transform-runtime引入后，还是会用到什么api需要单独手动引入么？？？

若是这样，这样开发时岂不是很繁琐？

from blog.

@wonyun 首先感谢回复。行文上可能有疏漏引起误解。因为 babel-runtime 都是自动帮你引入所需 polyfill，但每个文件引入的都是全量的 polyfill，很容易引起体积暴涨。所以我们可以加上 babel-plugin-transform-runtime，这样 runtime 所用的 polyfill 就会从 transform-runtime 里引入，就避免了体积暴涨的问题。

from blog.

@brunoyang ，不太明白这句因为 babel-runtime 都是自动帮你引入所需 polyfill，比方说我在代码中用到了Promise，在IE8下，babel-runtime难道会自动的帮我require这个promise的polyfill，还是需要开发者在代码开头手动引入这个promise polyfill文件？

from blog.

@wonyun 应该这么说，Babel 中 runtime 只是个 helper 函数库，runtime transform 根据 ast 结果帮你引入所需 helper 函数。所以是只用 runtime 是需要手动，但不要这样用，而是用 runtime transform。

from blog.

@brunoyang ,非常感谢，理解其中情况，babel-runtime是会自动引入polyfill的

from blog.

博主，问下transform-runtime，transform-decorators-legacy，transform-class-properties这些plugins引入的数组顺序会有关系吗

from blog.

好文，顶

from blog.

@wonyun 没明白意思

非常感谢，理解其中情况，babel-runtime是会自动引入polyfill的

这句话中babel-plugin-runtime-transform 是自动的吧？所有的helper，一个bundle里面就一个；而babel-runtime，一个模块（文件）里一个，打包成bundle就有好多冗余的代码了。

from blog.

那问问作者，babel-plugin-runtime-transform，引入的模块，需要手动安装并在.babelrc添加plugins或presets么？

from blog.

现在引入了runtime-transform，但是发现array中的fill不起作用，然后又去引用了polyfill，是在webpack中引入的，但是发现都不起作用

from blog.

好文章！顶顶

from blog.

写得不错

from blog.

写的不错，顶

from blog.

请问作者， es2015 跟 stage-* 是不是得同时存在， 如果自己写的代码存在es6、7语法的话

from blog.

是不是说transform-runtime有两个作用：

• 如果只用babel-runtime，那么如果多个模块都引用了helper，那么这些模块中都会有这些helper。如果用了transform-runtime，会将重复的helper提取出来让所有的模块重用

• 如果只用babel-runtime，需要通过类似const Promise = require('babel-runtime/core-js/promise')这样的方式手动引入。而如果用了transform-runtime就不用管了，需要用到的地方会自动引入

这样的理解对吗？

@wonyun @brunoyang

from blog.

还有一个疑问就是，babel-polyfill和babel-runtime + transform-runtime这两种方案是不是有以下区别：

• babel-polyfill的方案会把所有的都打包进来

• babel-runtime + transform-runtime 的方案只会把那些用到的helper提取打包进来，而那些没用到的则不会。

那么这样的话babel-runtime + transform-runtime会比babel-polyfill的方案更省空间。

这样的理解对吗？

@wonyun @brunoyang

from blog.

@xiaozhouwu babel-runtime 是会自动引入 polyfill 每一个模块 都有
ransform-runtime 的方案只会把那些用到的重复helper过滤掉 打包。
babel-polyfill 应该是全局的

from blog.

有点疑惑想请教，transform-runtime中的"helpers"和"moduleName"到底设置了什么，我是用webpack打包的，感觉没什么影响，官网上的解释也不是很理解

from blog.

"上面提到的插件可以将语法从 es6 转成 es5，但没有提供 api 的转码功能，如 Promise、..."
不太对吧,
比如babel-plugin-transform-object-assign属于 babel-plugin-*可以转换Object.assign

from blog.