babel 7 簡單升級指南

千水xxx發表於2018-08-30
Babel

babel 7

babel 7 釋出兩天了，試著對當前專案更新了下，僅此記錄分享

主要改動參考 官方部落格

官方升級指南

主要升級內容

  • 不再支援放棄維護的 node 版本 0.10、0.12、4、5
  • 使用 @babel 名稱空間，如 @babel/core
  • @babel/preset-env 代替 preset-es2015 等
  • TC39 提議的外掛改名為 -proposal，代替 -transform
  • 針對面向使用者的包（如 babel-loader、@babel/cli）在 @babel/core 中引入 peerDependency

新增 babel.config.js

  • 可按執行環境配置 babel 配置
  • 解析方式不同於 .babelrc，不會向上查詢
  • 可用 overrides 進行選擇性配置

主要新增語法

  • BigInt
  • 動態匯入
  • 可選連結 ( a?.b )
  • 邏輯賦值 ( a &&= b ; a ||= b )
let a = {b: 11}
a?.b  // a ? a.b : undefined

a &&= b // a = a && (a=b) 或 a = a && b
複製程式碼
  • ( a ?? b )
  • 管道操作符 ( a |> b )
let c = a ?? b // 只有 a 是 undefined 或 null 時，c 等於 b

let res = foo(boo(aaa('nice')))
===  
let res = 'nice' |> aaa |> boo |> foo
複製程式碼
  • 使用 @babel/preset-typescript 支援 TypeScript

polyfill 修改

  • import “@babel/polyfill” 匯入整個 polyfill
  • 可以使用配置選項 useBuiltIns: “entry” 按需匯入
  • 可以使用 useBuiltIns: “usage” 自動按使用到的 polyfill匯入

其他修改

  • babel-upgrade 自動升級工具
  • 速度提升、程式碼優化
  • 新增註解，方便 Uglify 等外掛移除無用程式碼
  • 新增一些 TC39 提案語法
  • @babel/runtime 變化
  • Babel 巨集配置
  • 模組模式配置支援
  • 支援擴充套件原生內建元素 （Array、Error 等）

升級

babel 升級工具修改配置

npx babel-upgrade --write

# 或是安裝 babel-upgrade 在 global 並執行
npm install babel-upgrade -g
babel-upgrade --write
複製程式碼

可以看到 package.json 中移除了舊版本的依賴，自動新增了新版名稱，.babelrc 檔案的配置也會自動修改 但是不會刪除已有的外掛，如原來的 transform-decorators-legacy

// 移除就版本依賴後重新安裝依賴

rm -rf node_modules
yarn install
複製程式碼

修改所有 bable-polyfill 為 @babel/polyfill

因為 babel 7 新增的 @babel 名稱空間，所以原來的 babel-polyfill 需要修改名稱

// index.js 頭部匯入修改
import '@babel/polyfill'

// webpack config 入口修改
entry: ['@babel/polyfill', './src/index.js'],
複製程式碼

裝飾器外掛

yarn add @babel/plugin-proposal-decorators -D

複製程式碼

注意

  • @babel/plugin-proposal-decorators 必須在 @babel/plugin-proposal-class-properties 之前配置
  • 裝飾器外掛新增的 legacy 配置

升級後的 .babelrc

 "dev": {
      "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/transform-async-to-generator",
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ],
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
        "@babel/plugin-proposal-optional-chaining",
        "react-hot-loader/babel",
        [
          "react-css-modules",
          {
            "webpackHotModuleReloading": true,
            "generateScopedName": "[path][name]__[local]--[hash:base64:5]",
            "filetypes": {
              ".less": {
                "syntax": "postcss-less"
              }
            }
          }
        ],
        [
          "import",
          {
            "libraryName": "antd"
          }
        ]
      ]
    },

複製程式碼

其他外掛

    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
複製程式碼

相關文章