babel 7

It’s been two days since Babel 7 was released, trying to update the current project, but that’s all for record sharing

Refer to the official blog for major changes

Official Upgrade Guide

Major Upgrades

  • Maintenance of node versions 0.10, 0.12, 4, and 5 is no longer supported
  • Use the @babel namespace, such as @babel/core
  • @babel/preset-env replaces preset- ES2015 and so on
  • The TC39 proposed plug-in is renamed -proposal instead of -transform
  • Introduce peerDependency in @babel/core for user-facing packages such as babel-Loader, @babel/ CLI

New Babel. Config. Js

  • Babel configuration can be configured based on the running environment
  • Parsing is different from.babelrc and does not look up
  • You can use overrides for optional configuration

Major new syntax

  • BigInt
  • Dynamic import
  • Optional link (A? .b )
  • Logical assignment (a &&= b; a ||= b )
leta = {b: 11} a? .b // a ? A.b: undefined a &&= b // a= a && (a=b) or a= a &&bCopy the code
  • ( a ?? b )
  • The pipe operator (a | b >)
letc = a ?? B // c is equal to b only if a is undefined or nulllet res = foo(boo(aaa('nice'= = =)))let res = 'nice' |> aaa |> boo |> foo
Copy the code
  • Use @babel/preset-typescript to support typescript

Polyfill modify

  • Import “@babel/polyfill” imports the entire Polyfill
  • You can use the configuration option useBuiltIns: Entry to import on demand
  • You can use useBuiltIns: “Usage” to automatically import the used Polyfill

Any other changes

  • Babel-upgrade Automatic upgrade tool
  • Speed improvement, code optimization
  • Add annotations to help plugins like Uglify remove unwanted code
  • Added some TC39 proposal syntax
  • @ Babel/runtime changes
  • Babel macro configuration
  • Module mode configuration supported
  • Support for extending native built-in elements (Array, Error, etc.)

upgrade

Babel upgrade tool modify the configuration

npx babel-upgrade --write

Install babel-upgrade in global and execute it
npm install babel-upgrade -g
babel-upgrade --write
Copy the code

As you can see, package.json removes old dependencies and automatically adds new names, and the configuration of the.babelrc file is automatically changed without removing existing plugins, such as the original transform-decorators-Legacy

// Remove the dependencies and reinstall them

rm -rf node_modules
yarn install
Copy the code

Change all able-polyfill to @babel/polyfill

Because of the new @babel namespace in Babel 7, the original babel-polyfill needs to be renamed

// Index.js header import modify import'@babel/polyfill'// Modify the webpack config entry: ['@babel/polyfill'.'./src/index.js'].Copy the code

Decorator plug-in

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

Copy the code

Pay attention to

  • @babel/plugin-proposal-decoratorsMust be in@babel/plugin-proposal-class-propertiesBefore the configuration
  • Legacy configuration added to the decorator plug-in

Upgraded.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"}}]].Copy the code

Other plug-ins

    "@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"
Copy the code