## 前言 本文主要描述babel的相关知识，节选于官网和一些较好的文章。 ## 官网 官网地址：[https://babeljs.io/](https://babeljs.io/) ## 了解 ### 基本作用 * 转化语法（不同的js语言版本） * 目标环境中缺少的Polyfill功能 * 源码转换 ### 支持jsx ，可以转换其对应的语法 ### 可插拔 以插件的形式进行，方便灵活的配置 ### ## 使用方式 - 单体js文件 - 命令行 cli - 构建工具的插件（webpack 的 babel-loader, rollup 的 rollup-plugin-babel） 其中二三种常见，第二种一般常见于package.json文件中的命令行配置，第三种常见于webpack的配置文件。 ## 运行方式和插件 ### 运行阶段 babel 总共分为三个阶段：解析，转换，生成。 **说明：** babel 本身不具有任何转化功能，它把转化的功能都分解到一个个 plugin 里面。因此当我们不配置任何插件时，经过 babel 的代码和输入是相同的。 > 而插件总共分为两种：语法插件和转义插件。 ### 语法插件 当我们添加 语法插件 之后，在解析这一步就使得 babel 能够解析更多的语法。(ps:babel 内部试用的解析类库叫做 babylon，并非 babel 自行开发)。也就是说当你需要支持某种语法写法的时候，就需要增加其对应的插件。 ### 转译插件 当我们添加 转译插件 之后，在转换这一步把源码转换并输出。这也是我们使用 babel 最本质的需求。比起语法插件，转译插件其实更好理解，比如箭头函数 (a) => a 就会转化为 function (a) {return a}。完成这个工作的插件叫做 babel-plugin-transform-es2015-arrow-functions。 ### 两种插件关系 同一类语法可能同时存在语法插件版本和转译插件版本。如果我们使用了转译插件，就不用再使用语法插件了。 ## 配置文件 插件基本是通过配置的方式进行使用的，分为两个步骤： - 将插件的名字增加到配置文件中 (根目录下创建 .babelrc 或者 package.json 的 babel 里面，格式相同) - 使用 npm install babel-plugin-xxx 进行安装 ``` // .babelrc or babel-loader option 示例的代码 { "plugins": [ ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件 ] } ``` ## preset（插件配置的优化方案） 那么虽然有一系列的插件，但是手动配置一系列的插件工作量非常大，也不方便记忆，所以可以简单的通过preset来进行配置，他是一个插件的集合体，通过配置preset可以快速的得到对应的需要的系列插件。 目前官网出的配置有：env, react, flow, minify，其中最重要的是env，我们一般设置的也是env. > stage-x，这里面包含的都是当年最新规范的草案，每年更新。这里面还细分为 > Stage 0 - 稻草人: 只是一个想法，经过 TC39 成员提出即可。 > Stage 1 - 提案: 初步尝试。 > Stage 2 - 初稿: 完成初步规范。 > Stage 3 - 候选: 完成规范和浏览器初步实现。 > Stage 4 - 完成: 将被添加到下一年度发布。 **注意事项：**低一级的 stage 会包含所有高级 stage 的内容，例如 stage-1 会包含 stage-2, stage-3 的所有内容 ## 执行顺序 插件的执行顺序与preset的执行顺序关系。 1 先执行插件中的配置，然后执行preset中的。 2 插件中的从前到后 3 preset中的按照从后到前，因为一般情况下preset的顺序是逆向的 ## 插件和配置项 简略情况下，插件和 preset 只要列出字符串格式的名字即可。但如果某个 preset 或者插件需要一些配置项(或者说参数)，就需要把自己先变成数组。第一个元素依然是字符串，表示自己的名字；第二个元素是一个对象，即配置对象。 ``` "presets": [ // 带了配置项，自己变成数组 [ // 第一个元素依然是名字 "env", // 第二个元素是对象，列出配置项 { "module": false } ], // 不带配置项，直接列出名字 "stage-2" ] ``` ## 特别介绍 env env 的核心目的是通过配置得知目标环境的特点，然后只做必要的转换。例如目标浏览器支持 es2015，那么 es2015 这个 preset 其实是不需要的，于是代码就可以小一点(一般转化后的代码总是更长)，构建时间也可以缩短一些。 如果不写任何配置项，env 等价于 latest，也等价于 es2015 + es2016 + es2017 三个相加(不包含 stage-x 中的插件)。env 包含的插件列表维护在这里.你可以根据浏览器的兼容标准，也可以根据node的版本进行配置。 ``` //指定浏览器 { "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }] ] } //指定nodejs { "presets": [ ["env", { "targets": { "node": "6.10" } }] ] } ``` 特别说明： modules配置项，它的取值可以是 amd, umd, systemjs, commonjs 和 false。这可以让 babel 以特定的模块化格式来输出代码。如果选择 false 就不进行模块化处理。 ## 配套工具对比说明  ## babel 7变化 ### preset 的变更：淘汰 es201x，删除 stage-x，强推 env (重点) ### npm package 名称的变化 (重点) * babel-cli 变成了 @babel/cli。 * babel-preset-env 变成了 @babel/preset-env。进一步，还可以省略 preset 而简写为 @babel/env。 * babel-plugin-transform-arrow-functions 变成了 @babel/plugin-transform-arrow-functions。和 preset 一样，plugin 也可以省略，于是简写为 @babel/transform-arrow-functions。 ### 不再支持低版本 node ### only 和 ignore 匹配规则的变化 不在操作于子目录，只操作于当前目录 ### @babel/node 从 @babel/cli 中独立了 这个的意思就是需要你单独安装 ### babel-upgrade 帮助用户进行babel的升级 ## 注意事项 ### 依赖部分加载（关联引入样式） 目前大部分的框架都支持依赖性载入，其对babel的配置有要求。一般是要求如下： 1 手动引入的方式，但是这种方式比较麻烦 ``` import DatePicker from 'antd-mobile/lib/date-picker'; // 加载 JS import 'antd-mobile/lib/date-picker/style/css'; // 加载 CSS // import 'antd-mobile/lib/date-picker/style'; // 加载 LESS ``` 2 使用babel-plugin-import (推荐方式) ``` // .babelrc or babel-loader option { "plugins": [ ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件 ] } ``` 然后只需从 antd-mobile 引入模块即可，无需单独引入样式。 ``` // babel-plugin-import 会帮助你加载 JS 和 CSS import { DatePicker } from 'antd-mobile'; ``` 注意事项 ： 1 如果你遇到报错：Module build failed: ReferenceError: Unknown plugin "import" specified in "base" at 0, attempted to ，那么你装下模块即可。npm i babel-plugin-import --save 2 如果你遇到生产环境打包后没有对应得样式，那么你需要prod对应的babel-loader的部分也增加对应的import的配置 ## 参考文章 - [了解babel](https://mp.weixin.qq.com/s/qetiJo47IyssYWAr455xHQ)