babel 用法及其 .babelrc 的配置详解，想做前端架构，拒绝一知半解...
Babel 官方介绍：将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的 javascript 代码。 简而言之，就是把不兼容的 JavaScript 代码转为可兼容，可以执行的 JavaScript 代码。 功能： 语法转换 添加一些兼容性的 polyfill 功能 源码转换等 简单配置预览： { "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一起使用 )。 { "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":[] } }, ... } 主要几个配置 presets ： 预设，插件的集合，倒序执行 plugins ： 插件，先执行插件，在执行预设，顺序执行 ignore ： 忽略的文件 minify ： 压缩代码 common : 是否需要注释 env ： 设置不同的环境，应用不同的配置，配置取值：BABEL_ENV，如若没有取 NODE_ENV 的值，默认为 development. 其他可以自行在官网浏览... 常见预设 env ： 用于替换 es2015 / es2016 / es2017 的预设。根据环境引入插件 react ：react的插件集合 react-optimize ： react 代码优化，如去除 propsType 减少生产上面代码 stage-x ：草案代码插件集合 flow ： flow 插件集合 minify ： 代码优化的集合 typescript ： typescript 插件集合 常用插件 transform-async-to-generator ： 异步函数 async/await 插件 transform-decorators-leagacy : 装饰器插件 syntax-dynamic-import ：import() 插件 transform-runtime ： 辅助器插件，用于ployfill transform-object-rest-spread : 用于合并 var test = {a:1,b2};var t = {...test,n:1} transform-funciton-bind : 用于编译 obj::fun => fun.bind(obj) transform-es2015-modules-commonjs ：es6 module 在 node 使用 https://www.cnblogs.com/jiebba/p/9613248.html 我的博客 ：XiaoLong's Blog 博客园小结巴巴：https://www.cnblogs.com/jiebba
