Babel 踩坑总结(一) —— 6.X 版本配置及概念理解

快来打我* 2022-02-22 12:56 349阅读 0赞

今天闲来无事试着从头构建一个前端项目，光 babel 就遇到不少问题，尤其是在 babel 升级到 7.X 版本之后，许多之前的配置都要发生一些变化，在这里做一个踩坑总结

### 1. 6.X 版本配置方法 ###

npm install babel-loader@7 babel-core babel-preset-react babel-preset-env babel-preset-stage-0 -D

下面是这些包的作用：

*  [babel-core][] Babel 的核心代码
 *  [babel-loader][] 解析 js 的 loader
 *  [babel-preset-react][] 用于解析 jsx 语法
 *  [babel-preset-env][] 取代之前的 `babel-preset-es2015` `babel-preset-es2016` 等包，解析 ES6 等语法
 *  [babel-preset-stage-0][] 同类的还有 `stage-1`、`stage-2`、`stage-3`，**`stage-0` 包含es7的解析内容，且同时包含 stage-1/2/3 的所有功能**

> 这里我指定了 babel-loader 的版本，因为不指定版本，babel-loader 会下载 8.X 版本，会报 babel 版本的问题，如下图(虽然我们已经下载了最新的，后面我会介绍 7.X 如何升级)

![在这里插入图片描述][20190409125223193.png]

然后是原来的 `.babelrc` 文件的配置

{ 
      "presets": [
        "env",
        "react",
        "stage-0"
      ]
    }

### 2. presets(预设) 与 plugins(插件) 差别 ###

举个例子， `babel-preset-es2015` 包含了 `transform-es2015-arrow-functions`(编译箭头函数)、`transform-es2015-block-scoping`(编译 const、let)、`transform-es2015-classes`(编译class)等几十个插件

如果不使用 `preset`，如果想要用完整的 es6 语法，使用者可能需要自己配置几十个 `plugins`。

### 3. plugins、presets 的编译顺序 ###

plugins、presets 的编译也许会有相同的功能或者有联系的功能，babel 是根据一定的顺序进行编译

*  plugins 优先于 presets 编译
 *  plugins 根据配置数组升序(自左向右)顺序进行编译
 *  presets 根据配置数组降序(自右向左)顺序进行编译

### 4. 一个很重要的问题 ###

使用 babel 有一个非常需要注意的点，babel 只是转译新标准(es6、es7)引入的新语法，比如 ES6 的箭头函数转换为 ES5 的函数、ES6 的 `let`、`const` 的转换还有 React 的 JSX 语法等等。

不过对于**Babel 默认只转换新的 JavaScript语法，而不转换新的 API** 比如`Iterator`、`Generator`、`Set`、`Maps`、`Promise` 等等全局对象，以及一些定义在全局对象上的方法（比如`Object.assign`）都不会转译

不做特别的处理，可能会造成下面的错误(这是我使用 `*、yield` 的ES6语法时报的错误 )

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70]

**新标准引入的新的原生对象、部分原生对象新增的原型方法，babel是不会转译的，需要额外进行处理**

[babel-core]: https://github.com/babel/babel/tree/master/packages/babel-core
[babel-loader]: https://github.com/babel/babel-loader
[babel-preset-react]: https://github.com/babel/babel/tree/master/packages/babel-preset-react
[babel-preset-env]: https://github.com/babel/babel/tree/master/packages/babel-preset-env
[babel-preset-stage-0]: https://github.com/babel/babel/tree/master/packages/babel-preset-stage-0
[20190409125223193.png]: /images/20220222/a2b56828c32840959c1cc460a9474e0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70]: /images/20220222/996271e2fd8a4b008a114f93c00b3b2c.png