babel介绍
-
Babel是一个JavaScript 编译器，可以把ES6的语法转为兼容浏览器的ES5语法； -
Babel可以单独使用，但是一般都是和webpack结合一起使用 -
webpack里使用babel最基本的几个包：babel-loader、babel-core、babel-preset-env、babel-polyfill
@babel/core
-
@babel/core包括了整个babel的工作流（输入字符串 -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator -> 输出字符串），是babel的核心包。 - 可以看做
babel的编译器。babel的核心api都在这里面，比如transform，主要都是处理转码的。它会把我们的js代码，抽象成ast，即abstract syntax tree的缩写，是源代码的抽象语法结构的树状表现形式。 - 我们可以理解为，它定义的一种分析
js语法的树状结构。也就是说es6的新语法，跟老语法是不一样的，那我们怎么去定义这个语法呢。所以必须要先转成ast，去发现这个语法的kind，分别做对应的处理，才能转化成es5.
@babel/preset-env
-
Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。 - 这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入
transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。 - 但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成
ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。 - 这个时候，可以采用
Babel Preset。 - 可以简单的把
Babel Preset视为Babel Plugin的集合。 - 这个
preset真是神器啊，它能根据当前的运行环境，自动确定你需要的plugins和polyfills。 -
Plugin与Preset执行顺序：可以同时使用多个Plugin和Preset，此时，它们的执行顺序非常重要。先执行完所有Plugin，再执行Preset。多个Plugin，按照声明次序顺序执行。多个Preset，按照声明次序逆序执行。
browserslist
browserslist指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
三种方式去配置：
- 在
.babelrc或者babel.config.js中去配置
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "4",
"chrome": "58",
"ie": "11"
}
}
]
]
}
- 在
package.json里面增加如下配置
{
"browserslist": [
"last 1 version",
"> 1%",
"maintained node versions",
"not dead"
]
}
- 在工程的根目录下存在
.browerslistrc配置文件
last 1 version
> 1%
maintained node versions
not dead
除了browserslist,另外还要在webpack.config.js中配置babel-loader
module: {
rules: [
{ ...其他loader...},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
}
]
}
package.json中也要配置相关的依赖
"dependencies": {
"babel-polyfill": "^6.26.0",
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.3.2",
},
要用@babel/polyfill的话，还要在入口文件中引入
image
@babel/polyfill&runtime&core-js
-
Babel默认只转换新的JavaScript语法（syntax），如箭头函数等，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码；所以光是使用@babel/preset-env是不够的，我们还需要polyfill； -
@babel/polyfill——让目标浏览器支持所有特性，不管它是全局的，还是原型的，或是其它。这样，通过@babel/polyfill，不同浏览器在特性支持上就站到同一起跑线。但是这样做也有一个缺点，就是会污染全局变量，而且项目打包以后体积会增大很多，因为把整个依赖包也搭了进去。所以并不推荐在一些方法类库中去使用。 -
@babel/preset-env下有一个选项useBuiltIns，用于指导@babel/preset-env如何触发polyfills.useBuiltIns有三个可能的值usage | entry | false。usage：根据实际项目中真正使用到的有需要兼容的polyfill添加进去 -
@babel/runtime： -
@babel/runtime-corejs2：
