babel 用法及其 .babelrc 的配置详解，想做前端架构，拒绝一知半解...

Babel

官方介绍：将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的 javascript 代码。

简而言之，就是把不兼容的 JavaScript 代码转为可兼容，可以执行的 JavaScript 代码。

　　功能：

　　　　语法转换

　　　　添加一些兼容性的 polyfill 功能

　　　　源码转换等

　　简单配置预览：

{"plugins": [],  // 插件配置"presets": []   // 预设配置
}// 这里 .babelrc 配置的// 官网建议用 module 的形式来配置，bable.config.jsconst 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一起使用 )。

{"presets": [ "dev" ]  
}

　　配置及其详解：

{"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、在入口文件的顶部添加：

require('@babel-polyfill');import '@babel-polyfill'

　　2、webpack 中添加

{entry:['@babel-polyfill','./app.js']
}

　　在 webpack 的配置文件中添加。

　　3、直接在 html 中引用，在打包 js 的文件之前

<script src = './babel-polyfill.js' ></script>

　　4、transform-runtime 插件

　　对 babel 转化后的代码，进行再次转化，与 babel-polyfill 一样，解决不兼容的全局 api 。

　　与 babel-polyfill 不同是它不是添加/修改全局对象。

　　它是对不兼容的方法进行特殊处理，也就是添加辅助方法来做兼容。

　　并且 transform-runtime 是在需要进行兼容转化时候引用。

　　transform-runtime 是依赖 babel-runtime ，且辅助方法都是引用的 babel-runtime

　　特点：

　　不会污染全局变量，因为不会修改全局对象

　　没有修改实例的方法，所以有些方法不能实现。

 ["transform-runtime", {
　　　　"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 来注册当前所有的代码需要转码

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 命令行工具

　　用于命令行编译文件，可以进行配置以及输出等操作。

　　用法：

babel  input.js -options
// 编译 input.js  文件

　　配置：

　　-o ：输出路径

　　-w ：监听编译文件，实时编译

　　-s ：输出source-map ，可以内敛

　　-d ：当编译一个目录时候，-d 输出目录

　　--ignore ：忽略的文件

　　--plugins ：使用插件，用 , 隔开

　　--presets ：使用预设，用 , 隔开

　　--config-file ：使用 .babelrc 文件路径

.babelrc 配置详解

　　配置转化起 babel 三种不同作用：

　　　　1、用于语法转义的配置。 preset-env / stage-x 主要用于 es 的语法转义，

　　　　2、用于补丁的配置，即 polyfill 的配置。主要是 transform-runtime 。

　　　　3、用于不同框架的配置，如：react的jsx /flow 等

　　例子：

{"presets":["react",["env",{...}],"stage-0"],"plugins":["pluginName",["transform-runtime",{...}]],"ignore":["path",'file'],"miniied":boolean,"comments":boolean,"env":{"test":{"presets":[],"plugins":[]}},...
}