vue - Babel之babel-polyfill、babel-runtime、transform-runtime详解
分类:编程 来源:互联网 时间:5年前 (2020年04月28日) 1497 0引言
babel默认只转换新的 JavaScript 语法,比如箭头函数、扩展运算(spread)。
不转换新的 API,例如Iterator
、Generator
、Set
、Maps
、Proxy
、Reflect
、Symbol
、Promise
等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign
)都不会转译。如果想使用这些新的对象和方法,则需要为当前环境提供一个垫片(polyfill)。
此篇仅对三种polyfill进行介绍,并讲了他们的安装配置。具体的每种对新语法的转换结果,可以看参考链接的第一个。
三种polyfill介绍
babel-polyfill
目前最常用的配合Babel一起使用的polyfill是babel-polyfill,通过改写全局prototype的方式实现,它会加载整个polyfill,针对编译的代码中新的API进行处理,并且在代码中插入一些帮助函数,比较适合单独运行的项目。
babel-polyfill解决了Babel不转换新API的问题,但是直接在代码中插入帮助函数,会导致污染了全局环境,并且不同的代码文件中包含重复的代码,导致编译后的代码体积变大。虽然这对于应用程序或命令行工具来说可能是好事,但如果你的代码打算发布为供其他人使用的库,或你无法完全控制代码运行的环境,则会成为问题。
babel-runtime
Babel为了解决上述问题,提供了单独的包babel-runtime用以提供编译模块的工具函数,启用插件babel-plugin-transform-runtime后,Babel就会使用babel-runtime下的工具函数。
babel-runtime插件能够将这些工具函数的代码转换成require语句,指向为对babel-runtime的引用。每当要转译一个api时都要手动加上require('babel-runtime')
。简单说 babel-runtime 更像是一种按需加载的实现,比如你哪里需要使用 Promise,只要在这个文件头部require Promise from 'babel-runtime/core-js/promise'
就行了
不过如果你许多文件都要使用 Promise,难道每个文件都要 import 一遍不成?
babel-plugin-transform-runtime
为了方便使用 babel-runtime,解决手动 require 的苦恼。它会分析我们的 ast 中,是否有引用 babel-rumtime 中的垫片(通过映射关系),如果有,就会在当前模块顶部插入我们需要的垫片。
transform-runtime 是利用 plugin 自动识别并替换代码中的新特性,你不需要再引入,只需要装好 babel-runtime 和 配好 plugin 就可以了。
好处是按需替换,检测到你需要哪个,就引入哪个 polyfill,如果只用了一部分,打包完的文件体积对比 babel-polyfill 会小很多。而且 transform-runtime 不会污染原生的对象,方法,也不会对其他 polyfill 产生影响。
所以 transform-runtime 的方式更适合开发工具包,库,一方面是体积够小,另一方面是用户(开发者)不会因为引用了我们的工具,包而污染了全局的原生方法,产生副作用,还是应该留给用户自己去选择。
⭐比较
babel-polyfill与babel-runtime相比虽然有各种缺点,但在某些情况下仍然不能被babel-runtime替代, 例如,
[1, 2, 3].includes(3)
,Object.assign({}
, {key: 'value'})
,Array
,Object
以及其他”实例”下es6的方法,babel-runtime是无法支持的, 因为babel-runtime只支持到 static 的方法。
安装配置
babel-polyfill
因为这是一个 polyfill (它需要在你的源代码之前运行),我们需要让它成为一个 dependency,而不是一个 devDependency 。
npm install --save babel-polyfill
直接在代码中require,或者在webpack的entry中添加,也可以在babel的env中设置useBuildins为true来开启。
//示例:vue-cli脚手架中使用 import 'babel-polyfill'
//示例:webpack的entry中添加 entry: { common: [ `babel-polyfill`, `whatwg-fetch`, `react`, `react-dom`, `redux`, `react-redux`, `js-cookie`, ], },
babel-runtime 和 babel-plugin-transform-runtime#
在大多数情况下,你应该安装 babel-plugin-transform-runtime 作为开发依赖(使用 --save-dev),并且将 babel-runtime 作为生产依赖(使用 --save)。这个看vue-cli生成的 package.json
就能发现。
因为babel编译es6到es5的过程中,babel-plugin-transform-runtime这个插件会自动polyfill es5不支持的特性,这些polyfill包就是在babel-runtime这个包里(core-js 、regenerator等)
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
用法#
通过 .babelrc(推荐)
将以下内容添加到你的 .babelrc 文件中:
未包含选项:
{ "plugins": ["transform-runtime"] }
包含选项:
{ "plugins": [ ["transform-runtime", { "helpers": false, "polyfill": false, "regenerator": true, "moduleName": "babel-runtime" }] ] }
选项#
1.辅助(helpers)
默认值是:true
表示是否开启内联的babel helpers(即babel或者环境本来的存在的垫片或者某些对象方法函数)(clasCallCheck,extends,etc)在调用模块名字(moduleName)时将被替换名字。
2.垫片/polyfill
默认值是:`true'
表示是否把内置的东西(Promise,Set,Map,tec)转换成非全局污染垫片。
3.重新生成/regenerator
默认值是:true
是否开启generator函数转换成使用regenerator runtime来避免污染全局域。
4.模块名字/moduleName
默认值:babel-runtime
当调用辅助(内置垫片)设置模块(module)名字/路径.
例子:
{ "moduleName": "flavortown/runtime" }
import extends from 'flavortown/runtime/helpers/extends';
优点#
不会污染全局变量
多次使用只会打包一次
依赖统一按需引入,无重复引入,无多余引入
缺点#
不支持实例化的方法,例
Array.includes(x)
就不能转化如果使用的API用的次数不是很多,那么transform-runtime 引入polyfill的包会比不是transform-runtime 时大
随着应用的增大,相同的 polyfill 每个模块都要做重复的工作(检测,替换),虽然 polyfill 只是引用,编译效率不够高效。
参考链接#
Babel用法 | usages transform-runtime