title: babel基础
order: 4
什么是 Babel?
Babel 是一个 JavaScript compilerBabel 是一个工具链,主要用于在当前和旧的浏览器或环境中,将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情:转换语法Polyfill 目标环境中缺少的功能(通过如 core-js 的第三方 polyfill
)源代码转换(codemods)以及更多!
配置文件.babelrc
Babel的配置文件是.babelrc
,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下。
{ "presets": [], "plugins": [] }
presets
字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
# ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3
然后,将这些规则加入.babelrc
。
{ "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }
注意,以下所有Babel工具和模块的使用,都必须先写好.babelrc
。
babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会转码。
举例来说,ES6在Array
对象上新增了Array.from
方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill
,为当前环境提供一个垫片。
安装命令如下。
$ npm install --save babel-polyfill
然后,在脚本头部,加入如下一行代码。
import 'babel-polyfill'; // 或者 require('babel-polyfill');
Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime
模块的definitions.js文件。
-
优点:解决babel只能转换部分低级语法问题,(如:let/const/解构赋值。。。),引入polyfill可以转换高级语法(如:Promise)
-
缺点:将所有高级语法都进行了转换,实际上可能只使用了一部分
-
解决:需要按需加载(使用了什么高级语法,就转换什么,而其他的不转换)
第二种方法:借助按需引入core-js按需引入
…暂未…
📢注意用webpack使用babel的babel-loader,配置是使用webpack的一套,与babel官网用法不同