vue - Babel之babel-polyfill、babel-runtime、transform-runtime
引言
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
小毛蛋_对babel-transform-runtime,babel-polyfill的一些理解
zackxizi babel-runtime和babel-polyfill的作用介绍和使用
babel-polyfill、babel-runtime 的选择
vue - Babel之babel-polyfill、babel-runtime、transform-runtime的更多相关文章
- @babel/preset-env使用polyfill遇到的坑
场景还原 最近将一个项目由babel@6升级到babel@7,升级后最重要的两个包: @babel/preset-env: 提供代码的转换和API的polyfill的能力 @babel/plugin- ...
- Microsoft Visual C++ Runtime Library Runtime Error的解决的方法
打开浏览器时,出现Microsoft Visual C++ Runtime Library Runtime Error错误,初步预计是软件冲突,可能有多种出错的方式,我的是浏览器自己主动关闭. 一. ...
- Microsoft Visual C++ Runtime Library Runtime Error解决的方式
打开浏览器时,出现Microsoft Visual C++ Runtime Library Runtime Error错误,初步预计是软件冲突,可能有多种出错的方式,我的是浏览器自己主动关闭. 一. ...
- [VUE]报错: No Babel config file detected for
在使用vue脚手架创建的项目中,项目中每个文件的第一行都会有红色波浪线. 解决方法:在项目文件中找到package.json文件,在parserOptions里添加"requireConfi ...
- Babel 处理 webpack 无法处理的 ES 语法(Babel 6.x 和 Babel 7.x 有区别)(二)
//这是main.js是我们项目的js入口文件 //1:a导入jQuery,引入jQuery包用$变量接收,此方法与node中 const $ = require('jquery') 同 //此为ES ...
- babel的使用及babel与gulp结合工作流
Babel 通过语法转换器支持最新版本的 JavaScript . 它有非常多的插件,这些插件能够允许我们立刻使用新语法,无需等待浏览器支持. 那我们怎么使用babel呢? 首先我们来了解babel基 ...
- webpack 安装vue(两种代码模式compiler 和runtime)
使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...
- Vue 项目添加 promise polyfill
1. 安装依赖 npm install es6-promise --save 2. 在 main.js 上面引入: import 'es6-promise/auto'
- [AST Babel Plugin] Transform code, add line:column number for console log
For example we have current code: function add(a, b) { console.log(a, b) return a + b } function sub ...
- @babel/runtime 和 @babel/plugin-transform-runtime 两个的作用是什么
Babel 最基础的功能就是将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中. 最基础的依赖包也就是 ...
随机推荐
- vuejs 踩坑及经验总结
问题描述 在使用 v-for repeat 组件时控制台会出现警告: 解决方法 在组件标签上使用 v-for : 加 :key 使用 template 标签包裹该组件,再在 template 标签 上 ...
- objectarx 得到有宽度的多段的轮廓
使用到的命令是:_.wmfout和_.import以及PEdit步骤:1.先通过_.wmfout和_.import得到轮廓线,得到的轮廓线是一个块.方法如下: //ssname:选择的有宽度的多段线 ...
- mysql JOIN查询
查询左表a,并且关联a表在b表中的关联,如果关联不存在也可以查出左表的,注:只查询a的部分列,和b的部分列 SELECT a.id, b.id as my FROM a LEFT JOIN b ON ...
- 攻防世界Mobile6 app1 XCTF详解
XCTF_app1 先安装看看 点击芝麻开门之后会弹出“年轻人不要耍小聪明噢” 这大概就能看懂是点击之后进行判断,那就直接去看JEB,看看判断条件是什么 V1是输入的字符串,V2获取包信息(百度的), ...
- cordova+vue打包ios调用相机闪退解决
cordova+vue项目打包android,打开相机正常使用,但是打包ios后,需要多几个配置,才能打开,否则当调用的时候会闪退,上配置图 需要在选中的文件里面添加 <key>NSCam ...
- Markdown语法说明及常用软件推荐(附链接)
Markdown语法同样支持HTML标签 以下所有字符均为英文字符 标题 标题级别由#决定,一个为一级 样例 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ...
- AlphaGo、人工智能、深度学习解读以及应用
经过比拼,AlphaGo最终还是胜出,创造了人机大战历史上的一个新的里程碑.几乎所有的人都在谈论这件事情,这使得把“人工智能”.“深度学习”的热潮推向了新的一个高潮.AlphaGo就像科幻电影里具有人 ...
- idea新建springboot项目
不多说废话,直接进入正题,按照下面的步骤创建一个springboot项目一般不会出错,当然不排除可能会有一些脸黑的,不过应该问题不大. 第一步,如果你是在已有的项目里面,新建一个springboot项 ...
- 一套代码同时支持.NET Framework和.NET Core
转自:https://www.cnblogs.com/tianqing/p/11614303.html 在.NET Core的迁移过程中,我们将原有的.NET Framework代码迁移到.NET C ...
- MySQL记录操作(增删改)
概览 MySQL数据操作: DML 在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 使用INSERT实现数据的插入 UPDATE实现数据的更新 使用DELETE实现数据 ...