[转] babel-present-env 与 babel-polyfill 学习总结
babelrc 配置文件
{
"presets": [
[
"env",
{
"modules": false,
"useBuiltIns": true,
"targets": {"browsers": ["last 2 versions", "safari >= 7", "ie>=9"]}
}
],
"stage-0",
"react"
],
"plugins": [
"syntax-dynamic-import",
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
babel-present-env
根据你支持的环境自动决定适合你的 Babel 插件的 Babel preset。它使用了 compat-table
在没有任何配置选项的情况下,babel-preset-env 与 babel-preset-latest(或者babel-preset-es2015,babel-preset-es2016和babel-preset-es2017一起)的行为完全相同。
它不会包含 stage-x 插件。env 将会支持我们认为最新版本的JavaScript的所有插件(过我们匹配在 babel-preset-latest 中所作的)。
这款preset能灵活决定加载哪些插件和polyfill,不过还是得开发者手动进行一些配置(targets)。
babel-polyfill
polyfill
的意思
polyfill这个单词翻译成中文是垫片的意思,详细点解释就是桌子的桌脚有一边矮一点,拿一个东西把桌子垫平。polyfill在代码中的作用主要是用已经存在的语法和api实现一些浏览器还没有实现的api,对浏览器的一些缺陷做一些修补。例如Array新增了includes方法,我想使用,但是低版本的浏览器上没有,我就得做兼容处理
理解polyfill的意思之后,再来说说babel为什么存在polyfill。
因为babel的转译只是语法层次的转译,例如箭头函数、解构赋值、class,对一些新增api以及全局函数
(例如:Promise)无法进行转译,这个时候就需要在代码中引入babel-polyfill,让代码完美支持ES6+环境。
前面介绍的babel-node就会自动在代码中引入babel-polyfill包。
- 但很多时候我们并不会使用所有ES6+语法,全局添加所有垫片肯定会让我们的代码量上升,之后会介绍其他添加垫片的方式。
transform-runtime
(transform-es2015-arrow-functions", //转译箭头函数
) 与babel-runtime
helpers
这种是按需进行polyfill
无需全局引入babel-polyfill
在一定程度上会减少代码体积
比较transform-runtime与babel-polyfill引入垫片的差异:
使用runtime是按需引入,需要用到哪些polyfill,runtime就自动帮你引入哪些,不需要再手动一个个的去配置plugins,
只是引入的polyfill不是全局性的,有些局限性。
而且runtime引入的polyfill不会改写一些实例方法,
比如Object和Array原型链上的方法,像前面提到的Array.protype.includes。
babel-polyfill就能解决runtime的那些问题,它的垫片是全局的,而且全能,
基本上ES6中要用到的polyfill在babel-polyfill中都有,它提供了一个完整的ES6+的环境。
babel官方建议只要不在意babel-polyfill的体积,最好进行全局引入,因为这是最稳妥的方式。
一般的建议是开发一些框架或者库的时候使用不会污染全局作用域的babel-runtime,
而开发web应用的时候可以全局引入babel-polyfill避免一些不必要的错误,
而且大型web应用中全局引入babel-polyfill可能还会减少你打包后的文件体积(相比起各个模块引入重复的polyfill来说)。
babel-polyfill 在项目代码前插入所有的 polyfill 代码,为你的程序打造一个完美的 es2015 运行环境。
babel 建议在网页应用程序里使用 babel-polyfill,只要不在意它略有点大的体积(min 后 86kb),直接用它肯定是最稳妥的。
值得注意的是,因为 babel-polyfill 带来的改变是全局的,所以无需多次引用,也有可能因此产生冲突,
所以最好还是把它抽成一个 common module,放在项目 的 vendor 里,或者干脆直接抽成一个文件放在 cdn 上。
回到应用开发。通过自动识别代码引入 polyfill 来优化看来是不太靠谱的,那是不是就无从优化了呢?
并不是。还记得 babel 推荐使用的 babel-preset-env 么?它可以根据指定目标环境判断需要做哪些编译。
babel-preset-env 也支持针对指定目标环境选择需要的 polyfill 了,只需引入 babel-polyfill,并在 babelrc 中声明 useBuiltIns,babel 会将引入的 babel-polyfill 自动替换为所需的 polyfill。
babel-present-env 的参数
useBuiltIns
1. 如果useBuiltIns为true,项目中必须引入babel-polyfill。
2. babel-polyfill只能被引入一次,如果多次引入会造成全局作用域的冲突。
做了个实验,同样的代码,只是.babelrc配置中一个开启了useBuiltIns,一个没有,两个js文件体积相差70k
https://github.com/Shenfq/studyBabel/tree/master/7-babel-env
useBuiltIns 可以根据之前的配置自行添加 polyfill,默认不开启。
安装 babel-polyfill 后只要引入一次就行:import "babel-polyfill";
- webpack2 的 tree shanking 技术
tree-shaking 都是因为 ES6 modules 的静态特性才得以实现的.
可以在编译阶段确定模块依赖
要在项目中使用这一技术需将 .babelrc 的 env 选项的 modules设为false, 即不需要babel处理es6模块,而交由webpack来处理
总结
- 由于有了
babel-present-env
才可以手动按需配置所需要的polyfill
babel-present-env
仅仅包括babel-present-2015、2016、2017
,不包括:babel-stage-x
,也不包括babel-polyfill
babel-present-env
仅仅转换 新版的语法 如:箭头函数
,并不转换新版api 如:Array.include
- 转换新版api及抹平浏览器之间的差异(兼容ie)需要
babel-polyfill
参考文章
[转] babel-present-env 与 babel-polyfill 学习总结的更多相关文章
- Babel 处理 webpack 无法处理的 ES 语法(Babel 6.x 和 Babel 7.x 有区别)(二)
//这是main.js是我们项目的js入口文件 //1:a导入jQuery,引入jQuery包用$变量接收,此方法与node中 const $ = require('jquery') 同 //此为ES ...
- typescript 的 polyfill 学习
我们知道typescript 是ES 超集.这意味着,不仅仅ES 的各种语法特性都会包括,还能保证通过typescript的编译服务可以很方便的转成ES向下兼容的版本,这得意于typescript强大 ...
- babel的使用及babel与gulp结合工作流
Babel 通过语法转换器支持最新版本的 JavaScript . 它有非常多的插件,这些插件能够允许我们立刻使用新语法,无需等待浏览器支持. 那我们怎么使用babel呢? 首先我们来了解babel基 ...
- typescript 的 polyfill 学习1-Class 继承篇
Class 继承 js 是多范式的编程语言,同样也是支持面向对象编程的,类 是面向对象中是很重要的概念. 区别于传统的java,c#基于模板的类,js是基于原型的. 类继承一般是通过原型链的方式来实现 ...
- 关于babel官网的学习
提起babel,前端er大概都不陌生.但是为什么要有babel呢?解决了什么问题?怎么使用babel呢?注意点在哪?以下就从这几个方面总结一下我关于babel学习的结果吧. 为什么要有babel呢? ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- ES6学习(1)——如何通过babel将ES6转化成ES5
使用babel编译ES6 babel是一个工具,可以通过多个平台,让js文件从ES6转化成ES5,从而支持一些浏览器并未支持的语法. Insall babel $ sudo npm install b ...
- Babel学习小记
一.babel配置文件中的plugins和presets是什么? 1.首先说说babel是什么,babel是一个JavaScript转码器,帮助我们把浏览器不兼容的ES6语法转换成ES5语法: 2.接 ...
- Babel与Polyfill的关系和区别
很多同学搞不清楚babel与polyfill的关系以及区别,这儿给大家细致解惑. Babel:Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码.注意:Babel 默 ...
- 02.ElementUI源码学习:babel配置
书接上文,接下来项目将引入babel支持ES6+语法兼容. Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行 ...
随机推荐
- canvas雪花特效-jQuery插件实现
这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...
- Appium基础二:Appium的安装(基Windows)
1.JAVA环境配置: 1.1安装jdk: 1.2配置JAVA_Home.Path配置.java验证 Path: 输入C:\Program Files\Java\jdk1.8.0_121\bin:C: ...
- 单链表常见面试题(C语言实现)
总结常见的单链表操作函数,复习使用,仅供参考,代码调试通过. #include<stdio.h> typedef struct node{ int data; struct node *n ...
- SharePoint Server和Office 365之间的混合模式集成概述
正如您可能已经知道的那样,云中的Microsoft Office 365和SharePoint Server 2013/2016内部部署可以通过多种方式协同工作.这些通常被称为混合模式,因为它们将功能 ...
- 理解Postgres性能
目录[-] 理解Postgres性能 理解缓存和缓存命中率 理解索引用途 Heroku Dashboard示例 索引缓存命中率 理解Postgres性能 对于很多应用程序开发人员来说数据库就是一个黑盒 ...
- servlet forword服务器端跳转
web.xml中配置servlet的映射和访问路径 <?xml version="1.0" encoding="UTF-8"?><web-ap ...
- [windows]窗口文件夹中使用常见任务
文件夹中使用常见任务,如截图所示增加红色框部分. 设置步骤: 我的电脑--〉右键--〉属性--〉高级选项--〉性能设置--〉自定义:勾选在文件夹中使用常见任务.
- SAP ERP classification和C4C的同步
在ERP里创建两个characteristic: 创建一个class包这两个characteristic.Class type 002意为该class能用于equipment. replicate到C ...
- ES6, Angular,React和ABAP中的String Template(字符串模板)
String Template(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性.本文将Jerry工作中使用到的String Template的特性做一个总结. ES6 阮一峰老师有一个专 ...
- 日常-acm-鸡兔同笼
已知鸡和兔总数量n,总腿数m.输入n和m,依次输出鸡的数量和兔的数量.如果无解,则输出No answer. 样例输入: 14 32 样例输出: 12 2 样例输入: 10 16 样例输出: No an ...