Babel 7 项目升级实战

àì夳堔傛蜴生んèń 2022-03-14 13:46 202阅读 0赞

## 前言 ##

Babel可以说是目前前端工程中必备的一款工具链（除非你还在用ES6以前的语法），主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的JavaScript代码。Babel 7 已于2018年8月份正式发布，其中更新了很多的用法和内容，使得几乎要重新安装NPM包和配置Babel文件。这篇文章详细的介绍了如何从Babel 6以前的版本升级成Babel 7，项目以React项目为例子，希望能够对大家有帮助。

## 开始 ##

我们项目中的Babel配置文件放在了\*\*.babelrc\*\*文件中，Babel官方如是说：

> You want to programmatically create the configuration?  
> You want to compile node\_modules?  
> [`babel.config.js`][babel.config.js] is for you!  
> You have a static configuration that only applies to your simple single package?  
> [`.babelrc`][.babelrc] is for you!

大致意思就是如果你的配置文件很简单，那么使用.babelrc就可以了，但是如果你想要更加灵活的动态配置项，那么使用babel.config.js更加合适。这里选择将.babelrc改为babel.config.js文件，接下来先安装新的Babel插件包。

在Babel 7中，最重要的升级之一就是将所有的packages改为了scoped packages，这将有效的避免重名或者名称被抢注的问题，而且在命名上就与普通的社区packages区别开来，更加的清晰。所以我们将原先安装的Babel核心包**babel-core**改为\*\*@babel/core\*\*

npm install --save-dev @babel/core

同样的，其余的组件也要统统改为@babel命名安装，在不确定是否有@babel格式前，可以去Babel的中文官网搜索下。

npm install --save-dev @babel/preset-env
    npm install --save-dev @babel/preset-flow
    npm install --save-dev @babel/preset-react

现在就可以配置**Presets**，**Presets**包含已经配置好的插件，能够简化你自己配置插件的步骤，拿来即用。

presets: [
          [
            '@babel/env',
            {
              'modules': false,
              'debug': false,
              'targets': {
                'browsers': [
                  'last 2 versions',
                  'ie >= 11'
                ]
              }
            }
          ],
          '@babel/react',
          '@babel/flow'
        ]

其实这里和旧的配置的区别就在于把原来每个预置的名称加上了`@babel`，安装完预置之后可以根据项目需求安装插件了，将以前的插件比如**babel-plugin-transform-runtime**改为\*\*@babel/plugin-transform-runtime**安装，其他的插件也要这样修改。像**@babel/proposal-object-rest-spread**和**@babel/proposal-decorators\*\*这样的插件，因为配置方法的改变，所以需要根据官方文档重新配置。

{
      plugins: [
          'lodash',
          [
            '@babel/transform-runtime',
            {
              'corejs': false,
              'helpers': true,
              'regenerator': true,
              'useESModules': false
            }
          ],
          [
            '@babel/proposal-object-rest-spread',
            {
              'loose': true,
              'useBuiltIns': true
            }
          ],
          [
            '@babel/proposal-decorators',
            {
              'legacy': true
            }
          ],
        ],

## 结语 ##

基本上常用的一些配置升级方法就简单的介绍完了，还有**env**之类的配置也是差不多的，在运行项目时babel插件会在根目录下寻找babel.config.js文件来执行，所以差不多就大功告成了。

[babel.config.js]: https://babel.docschina.org/docs/en/configuration#babelconfigjs
[.babelrc]: https://babel.docschina.org/docs/en/configuration#babelrc