正文
Babel
官方介绍：将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的 javascript 代码。
简而言之，就是把不兼容的 JavaScript 代码转为可兼容，可以执行的 JavaScript 代码。
功能：
语法转换
添加一些兼容性的 polyfill 功能
源码转换等
简单配置预览：
?
|
1 2 3 4 5 6 7 8 9 10 11 12 13
|
{
"plugins"
: [],
// 插件配置
"presets"
: []
// 预设配置
}
// 这里 .babelrc 配置的
// 官网建议用 module 的形式来配置，bable.config.js
const presets = []
const plugins = []
module.exports = { presets, plugins }
|
配置介绍：
presets ：是某一类 plugin 的集合，包含了某一类插件的所有功能。
plugin ： 将某一种需要转化的代码，转为浏览器可以执行代码。
编译的执行顺序：
1、执行 plugins 中所有的插件
2、plugins 的插件，按照顺序依赖编译
3、所有 plugins 的插件执行完成，在执行 presets 预设。
4、presets 预设，按照倒序的顺序执行。(从最后一个执行)
5、完成编译。
1、主要插件介绍
babel-preset-es2015 ( ES2015 / ES6 插件集合 )
将 ES2015(es6) 的 javascript 代码 转化 浏览器兼容 javascript 代码
arrow-functions ：箭头函数
block-scoped-functions ：函数命名的方式转话，改为赋值的形式
block-scoping ：let 转为 var
classes ： es6 的类转化
computed-properties ：属性命名的转化，如：var obj = { ['x'+a]: 1 }
destructuring ：析构函数转化
duplicate-keys ：属性优化
for-of ：for of 的转化
function-name ：优化函数命名
instanceof ：instanceof 转化
literals ：不同类型复制优化
new-target ：继承 extends 转化
object-super ：super 转化
parameters ：params ，(a=1,b=2)=>{} , 默认参数转化
shorthand-properties ：对象属性转化 {a,b} => {a:a,b:b}
spread ：扩展属性转化 {...other}
sticky-regex ：regex 优化，用 new Regex构建
template-literals ：字符串模版
typeof-symbol ：symbol 转化
unicode-regex ：将正则的匹配字符串转为 unicode
babel-preset-es2016 （ ES2016 / ES7 插件集合 ）
将 ES2016(es7) 的 javascript 代码 转为 浏览器兼容代码
exponentiation-operator ：幂运算转化 x **= 3 ，x的3次幂
babel-preset-es2017（ ES2017 / es8 插件集合 ）
将 ES2017(es8) 的代码进行转化
async-to-generator ： 转化 async/await 转为 generator 函数
babel-preset-stage-x （ ES2018/stage 插件集合 ）
将 stage 阶段的代码转化
async-generator-function ：将异步函数进行转化
dotall-regex ：点号正则优化
object-rest-spread ：解析构优化
optional-catch-binding ：catch 加 finally 优化
unicode-proprty-regex
Modules
modules-amd / modules-commonjs / modules-systemjs / modules-umd
将不同的 export default x 转为不同的模块形式 amd / commonjs / systemjs / umd
Experiental （ 试验阶段 ）
class-properties ：class 的静态属性转化
decorators ：装饰器转化
do-expressions
export-default-from ：export 优化
export-namespace-from ：export 优化
function-bind ：bind 函数转化，obj::fun => fun.bind(obj) ::obj.fun => obj.fun(obj)
function-sent
logical-assignment-operators
nullish-coalescing-operaor
numeric-separator
optional-chaining
pipeline-opertor
throw-expressions
Minification（ babel-minify ）
运用代码压缩优化插件预设
...
这里自行可以去官网上查看...
babel-preset-react ( react 集合 )
react 的相关编译转化...
jsx 和 element 的一下转化
直接添加 react 的预设就可以了。
Other 其他一些插件
jscript ：严格模式命名
object-assgin ：assgin 转化
regenerator ：generator 函数的转化
object-set-prototype-of-to-assign ：setPrototype 转化
runtime
2、主要 presets 介绍
@babel/preset-dev
是一个智能预设。
根据浏览器和运行环境，自动的确定 babel 插件和 polyfills 。
没有任何配置的情况下，和 babel-preset-latest 一样 ( es2015/es2016/es2017一起使用 )。
?
|
1 2 3
|
{
"presets"
: [
"dev"
]
}
|
配置及其详解：
?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
{
"presets"
: [
[
'@babel/preset-env'
,
{
'target'
:{
"browser"
:[
"ie>=8"
,
"chrome>=62"
],
"node"
:
"8.9.0"
,
"safari"
:
"tp"
},
"modules"
:
false
,
"debug"
:
true
,
"uglify"
:
true
"useBuiltIns"
:
true
}
]
]
}
|
target : 描述您为项目配置的 支持/定位 的环境
browsers ：浏览器的支持情况，将返回支持浏览器列表。 会被 target.ie 覆盖
[ 'ie>=8' ] 支持 ie8 的环境
"default" 默认
node ：指定是 node 环境，且可以指定版本
safari : safari 版本
modules : 启用将 es6 转为其他模块
debug ： 是否启用 console.log
include / exclude : 必须启用的 plugin 功能 / 不启用的 plugin 功能
uglify : 压缩代码
useBuiltIns ：
false ： 引用所有的 babel-polyfill ， 在 webpack 中添加 babel-polyfill 入口处：
entry:[ 'babel-polyfill' , 'index.js' ] , 引用所有的 polyfill，体积变大
true ： 引用部分，根据配置的 preset-env 环境，引用 polyfill ，
在入口文件中要引用 babel-polyfill
@babel/preset-react
这都是一些 react 相关的集合
不需要介绍了，有需要自己去官网浏览下.
Stage-x
草案中的预设..
该插件集合不存在 preset-env 集合中，所以需要引用....
3、babel-polyfill 兼容方法
babel的 preset-dev 中只会转化新的 Javascript 语法，不会转化新的 api。
例如：Generator / Set / Map 等
就是实现 babel 转化后的代码中，仍有不兼容的代码的转化。
原理：
babel-folyfill 是修改全局的对象的原型，添加不兼容的 api 方法，或者修改不兼容的 api 方法。
用法：
1、在入口文件的顶部添加：
?
|
1 2 3
|
require(
'@babel-polyfill'
);
import
'@babel-polyfill'
|
2、webpack 中添加
?
|
1 2 3
|
{
entry:[
'@babel-polyfill'
,
'./app.js'
]
}
|
在 webpack 的配置文件中添加。
3、直接在 html 中引用，在打包 js 的文件之前
?
|
1
|
<script src =
'./babel-polyfill.js'
></script>
|
4、transform-runtime 插件
对 babel 转化后的代码，进行再次转化，与 babel-polyfill 一样，解决不兼容的全局 api 。
与 babel-polyfill 不同是它不是添加/修改全局对象。
它是对不兼容的方法进行特殊处理，也就是添加辅助方法来做兼容。
并且 transform-runtime 是在需要进行兼容转化时候引用。
transform-runtime 是依赖 babel-runtime ，且辅助方法都是引用的 babel-runtime
特点：
不会污染全局变量，因为不会修改全局对象
没有修改实例的方法，所以有些方法不能实现。
?
|
1 2 3 4 5 6
|
[
"transform-runtime"
, {<br>
"corejs"
:
false
,
"helpers"
:
false
,
"polyfill"
:
false
,
"regenerator"
:
true
,
"moduleName"
:
"babel-runtime"
}]
|
helpers ： 是否使用 @babel-runtime/helpers 来代替内部的 helpers
coresjs ： 是否用 @babel-runtime/corejs 中的辅助方法来替换 Map / Set 等方法
polyfill : 是否用 @babel-runtime 的辅助函数来代替 polyfill
regenerator ： 是否用 辅助函数来代替 async / generator 函数
moduleName ： 引用时候名字
5、@babel-register
通过 @babel-register 来注册当前所有的代码需要转码
?
|
1 2 3
|
var
fs = require(
'fs'
);
var
babelConfig = JSON.parse(fs.readFileSync(
'./.babelrc'
));
require(
'babel-register'
)(babelConfig);
|
很显然，这里可以传入一个 .babelrc 配置文件来进行转码时候的配置。
只需要添加到入口文件中。
node 端就可以这这样实现 babel 的转码。
6、tools
babel-parser : babel 的解析器，用于解析 Javascript / jsx / Typescript / flow 等代码
babel-core ： babel 的核心文件，用于转码的
babel-generator ： 代码的转化，源码和转化代码
babel-code-frame : 代码转化位置等转码映射
babel-helpers ： 辅助器方法
babel-runtime ： 提供了一些列的辅助方法，与 polyfill 类似
...
@bable/babel-cli 命令行工具
用于命令行编译文件，可以进行配置以及输出等操作。
