愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

babel中transform-runtime和babel-polyfill两个插件的区别

一、babel-polyfill

由于babel默认只转换新的JavaScript语法,但对于一些新的API是不进行转化的(比如内建的PromiseWeakMap,静态方法如Array.from或者Object.assign),那么为了能够转化这些东西,我们就需要使用babel-polyfill这个插件
由于babel-polyfill是个运行时垫片,所以需要声明在dependencies而非devDependencies


二、babel-plugin-transform-runtime

由于使用babel-polyfill,会产生以下问题:
1)babel-polyfill会将需要转化的API进行直接转化,这就导致用到这些API的地方会存在大量的重复代码
2)babel-polyfill是直接在全局作用域里进行垫片,所以会污染全局作用域
所以,babel同时提供了babel-plugin-transform-runtime这一插件,它的好处在于:
1)需要用到的垫片,会使用引用的方式引入,而不是直接替换,避免了垫片代码的重复
2)由于使用引用的方式引入,所以不会直接污染全局作用域。这就对于库和工具的开发带来了好处
但是babel-plugin-transform-runtime仍然不能单独作用。因为有一些静态方法,如"foobar".includes("foo")仍然需要引入babel-polyfill才能使用


三、参考资料