Babel 7 项目升级实战

前言

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 is for you! You have a static configuration that only applies to your simple single package? .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文件来执行，因此差很少就大功告成了。