为什么需要babel？

1. 事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：
2. 开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
3. Babel是一个工具链，主要用于旧浏览器或者缓解中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；
4. 包括：语法转换、源代码转换、Polyfill实现目标缓解缺少的功能等；

babel命令行使用

1. babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用
2. 如果我们希望在命令行尝试使用babel，需要安装如下库：
3. @babel/core：babel的核心代码，必须安装；
4. @babel/cli：可以让我们在命令行使用babel；
5. yarn add @babel/cli @babel/core
6. 使用babel，直接处理源代码：
7. src：是源文件的目录；
8. –out-dir：指定要输出的文件夹dist；
9. 输入命令行npx babel src --out-dir dist

babel的插件使用方法

1. 比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：
2. js的内容为const fn = () => { console.log(11111); }
3. 安装命令yarn add @babel/plugin-transform-arrow-functions
4. 针对单个文件，对应命令行输入：npx babel index.js --out-file dist.js --plugins=@babel/plugin-transform-arrow-functions
5. 针对文件夹，对应命令行输入：npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
6. 查看转换后的结果：我们会发现 const 并没有转成 var
7. 这是因为 plugin-transform-arrow-functions，并没有提供这样的功能；
8. 我们需要使用 plugin-transform-block-scoping 来完成这样的功能；
9. yarn add @babel/plugin-transform-block-scoping
10. 对应命令为：npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

babel的预设preset

1. 如果上面要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）
2. 安装@babel/preset-env预设：
3. yarn add @babel/preset-env -D
4. 执行如下命令：npx babel src --out-dir dist --presets=@babel/preset-env

在webpack中使用 babel

1. 目录结构

2. index.js内容const fn = () => { console.log(11111); }

3. package.json

4. zanlan.config.js内容，有一下版本

5. 只是处理箭头函数和const，则

6. 如果想要更多，就使用预设

7. 如果想把配置放入单独的文件内，则需要新建babel.config.js,内容为

8. 对应的zanlan.config.js

设置目标浏览器 browserslist

1. 我们最终打包的JavaScript代码，是需要跑在目标浏览器上的，那么如何告知babel我们的目标浏览器呢？
2. postcss也用到过.browserslistrc，为了共用一套，都写在该文件下
3. 也可以在内部参数配置
4. 开发中不建议在options内配置，最好是统一设置在.browserslistrc，这样postcss也是一直使用
5. 目标版本优先级：
   1. @babel/preset-env 里的 targets
   2. package.json 里的 browserslist 字段
   3. .browserslistrc 配置文件

多个预设联用：

老的babel会使用

预设preset的stage-x

1. 要了解Stage-X，我们需要先了解一下TC39的组织：

   1. TC39是指技术委员会（Technical Committee）第 39 号；
   2. 它是 ECMA 的一部分，ECMA 是 “ECMAScript” 规范下的 JavaScript 语言标准化的机构；
   3. ECMAScript 规范定义了 JavaScript 如何一步一步的进化、发展；

2. TC39 遵循的原则是：分阶段加入不同的语言特性，新流程涉及四个不同的 Stage

   1. Stage 0：strawman（稻草人），任何尚未提交作为正式提案的讨论、想法变更或者补充都被认为是第 0 阶段的"稻草人"；
   2. Stage 1：proposal（提议），提案已经被正式化，并期望解决此问题，还需要观察与其他提案的相互影响；
   3. Stage 2：draft（草稿），Stage 2 的提案应提供规范初稿、草稿。此时，语言的实现者开始观察 runtime 的具体实现是否合理；
   4. Stage 3：candidate（候补），Stage 3 提案是建议的候选提案。在这个高级阶段，规范的编辑人员和评审人员必须在最终规范上签字。Stage 3 的提案不会有太大的改变，在对外发布之前只是修正一些问题；
   5. Stage 4：finished（完成），进入 Stage 4 的提案将包含在 ECMAScript 的下一个修订版中；

3. 在babel7之前（比如babel6中），我们会经常看到这种设置方式：

4. 它表达的含义是使用对应的 babel-preset-stage-x 预设；

5. 但是从babel7开始，已经不建议使用了，建议使用preset-env来设置；

6. 

7. 

babel的配置文件

1. 像之前一样，我们可以将babel的配置信息放到一个独立的文件中，babel给我们提供了两种配置文件的编写：
2. babel.config.json（或者.js，.cjs，.mjs）文件；
3. .babelrc.json（或者.babelrc，.js，.cjs，.mjs）文件；
4. 它们两个有什么区别呢？目前很多的项目都采用了多包管理的方式（babel本身、element-plus、umi等）；
5. .babelrc.json：早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的；
6. babel.config.json（babel7）：可以直接作用于Monorepos项目的子包，更加推荐；
7. 
8. Monorepos 和 Multirepos 项目架构

认识polyfill

1. Polyfill是什么呢？
   1. 翻译：一种用于衣物、床具等的聚酯填充材料, 使这些物品更加温暖舒适；
   2. 理解：更像是应该填充物（垫片），一个补丁，可以帮助我们更好的使用JavaScript；
2. 为什么时候会用到polyfill呢？
   1. 比如我们使用了一些语法特性（例如：Promise, Generator, Symbol等以及实例方法例如Array.prototype.includes等）
   2. 但是某些浏览器压根不认识这些特性，必然会报错；
   3. 我们可以使用polyfill来填充或者说打一个补丁，那么就会包含该特性了；
3. 如何使用polyfill？

   1. babel7.4.0之前，可以使用 @babel/polyfill的包，但是该包现在已经不推荐使用了：

   2. babel7.4.0之后，可以通过单独引入core-js和regenerator-runtime来完成polyfill的使用：yarn add core-js regenerator-runtime

   3. 在babel.config.js内配置

      1. useBuiltIns属性有三个常见的值
      2. 第一个值：false，打包后的文件不使用polyfill来进行适配；并且这个时候是不需要设置corejs属性的；
      3. 第二个值：usage,会根据源代码中出现的语言特性，自动检测所需要的polyfill；这样可以确保最终包里的polyfill数量的最小化，打包的包相对会小一些；可以设置corejs属性来确定使用的corejs的版本；
      4. 第三个值：entry
      5. 如果我们依赖的某一个库本身使用了某些polyfill的特性，但是因为我们使用的是usage，所以之后用户浏览器可能会报错；
      6. 所以，如果担心出现这种情况，可以使用 entry；
      7. 使用 entry需要在入口文件中添加 `import ‘core-js/stable’; import ‘regenerator-runtime/runtime’;
      8. 这样做会根据 browserslist 目标导入所有的polyfill，但是对应的包也会变大；

   4. 在zanlan.config.js内使用使用babel-loader，需要禁止掉exclude:/node_modules/，否则会把node_module内用到的包，它已经有自己的polyfill了，就会有冲突

认识Plugin-transform-runtime

1. 在前面我们使用的polyfill，默认情况是添加的所有特性都是全局的
2. 如果我们正在编写一个工具库，这个工具库需要使用polyfill；
3. 别人在使用我们工具时，工具库通过polyfill添加的特性，可能会污染它们的代码；
4. 所以，当编写工具时，babel更推荐我们使用一个插件： @babel/plugin-transform-runtime来完成polyfill的功能；
5. 使用Plugin-transform-runtime
6. 安装yarn add @babel/plugin-transform-runtime
7. 使用plugins来配置babel.config.js：
8. 配置插件了，就需要把预设的额外配置给注释掉
9. 注意：因为我们使用了corejs3，所以我们需要安装对应的库：
10. 安装对应的库yarn add @babel/runtime-corejs3

React的jsx支持

1. 在我们编写react代码时，react使用的语法是jsx，jsx是可以直接使用babel来转换的。
2. 对react jsx代码进行处理需要如下的插件：
3. yarn add @babel/plugin-syntax-jsx
4. yarn add @babel/plugin-transform-react-jsx
5. yarn add @babel/plugin-transform-react-display-name
6. 但是开发中，我们并不需要一个个去安装这些插件，我们依然可以使用preset来配置
7. yarn add @babel/preset-react
8. 修改babel.config.js预设配置
9. 在代码中使用到的包yarn add react react-dom
10. zanlan.config.js
11. index.js
12. 打包后的index.html，添加
13. 打开预览

babel编译器原理

babel编译器原理：

babel的配置文件：

module.exports = {
  presets: [
    ["@babel/preset-env", {
      // false: 不用任何的polyfill相关的代码
      // usage: 代码中需要哪些polyfill, 就引用相关的api
      // entry: 手动在入口文件中导入 core-js/regenerator-runtime, 根据目标浏览器引入所有对应的polyfill
      useBuiltIns: "entry",
      corejs: 3
    }],
    ["@babel/preset-react"]
  ],
  // plugins: [
  //   ["@babel/plugin-transform-runtime", {
  //     corejs: 3
  //   }]
  // ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

promise和generator，symbol转换不了，需要装polyfill