近期把之前自己写的一个 react + webpack 项目模板中的依赖包进行了大型升级和整理。其中就遇到了
babel-core，在升级到最新的@babel/core过程中，才发现相关的 Babel 插件也都需要升级。干脆写一篇笔记，重新学习 Babel，也记录升级中需要注意的地方。
Babel 是什么？
刚开始用 React 开发的时候，按照文档，使用.babelrc文件，在里面添加一些参数。但是不明就里。那么 Babel 到底是什么呢？为什么 React 项目中需要用到 Babel 呢？
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
- Transform syntax
- Polyfill features that are missing in your target environment (through
@babel/polyfill)- Source code transformations (codemods)
- And more! (check out these videos for inspiration)
Babel 是一个工具链，主要用来转换 ES2015+ 的代码，从而实现向后兼容旧版浏览器环境。这样不用等浏览器支持，Babel 中的一些插件就可以让我们使用 ES2015+ 的新语法了。
Babel 也可以转换 JSX 语法，所以在 React 项目中，我们可以安装 @babel/preset-react 。这个预设（preset） 中包含了 React 开发中需要用到的 Babel 插件，比如 @babel/plugin-syntax-jsx、@babel/plugin-transform-react-jsx 等。Babel 是由一组插件构建的。我们可以自己定义一套插件组合，也可以直接使用 Preset。
升级 Babel 6 到 7
在升级过程中主要有以下两点：
1. 依赖包名称变化
升级 Babel 到7之后，名称也变了。之前安装的插件是bable-core，v7 就得安装 @babel/core了。而且，所有相关的插件，也都得跟着变了。比如：
- babel-preset-react >
@babel/preset-react - babel-plugin-syntax-dynamic-import >
@babel/plugin-syntax-dynamic-import - babel-preset-es2015 >
@babel/preset-es2015。（但所有年份后缀的preset 已经弃用了，建议使用@babel/preset-env）
如果插件没有都升级成 Babel 7对应的版本，可能会报错：
Plugin/Preset files are not allowed to export objects, only functions.
这就说明在项目中，既有 Babel 6 的插件，又有 Babel 7 的插件，导致了版本冲突（参考这里）。
2. 修改 Presets
以下有年份的 Preset 都被 @babel/preset-env 取代：
- babel-preset-es2015
- babel-preset-es2016
- babel-preset-es2017
- babel-preset-latest
- 以上的组合
另外，所有的 stage preset 也被弃用了，比如 @babel/preset-stage-0。详情可以阅读 Removing Babel's Stage Presets。
参考阅读
- Babel docs: babeljs.io/docs/en/
