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文件來執行，因此差很少就大功告成了。