babel6使用ES2020最新js语法

babel6使用ES2020最新js语法

Babel 6 原本是不支持 ES2020 语法，因为它是在 Babel 7 中引入的。如果您想使用 ES2020 语法，您需要将 Babel 6 升级到 Babel 7 或更高版本(推荐),当然也可以在bebel6中安装支持某个语法的plugin,比如你想使用 ES2020 中的可选链操作符,就要配置使用 @babel/plugin-proposal-optional-chaining。

ES2020新增语法

这里只列出我们最常用,也最好用的语法

1. 可选链操作符

const obj = {};

// 老语法
let second = obj && obj.first && obj.first.second;

//es2020可选链语法
let second = obj?.first?.second;

2. 空位合并运算符

// 老语法
//这两种方式有个明显的弊端，它都会覆盖所有的假值，如(0, '', false)，这些值可能是在某些情况下有效的输入
let c = a ? a : b // 方式1
let c = a || b // 方式2

//es2020
// ??的左侧运算符求值为 undefined 或 null，才返回其右侧默认值
let c = a ?? b;
// 等价于let c = a !== undefined && a !== null ? a : b;

方式一: 升级babel7(推荐)

1. 使用Babel升级工具

不要手动升级,因为不同babel版本依赖不同的node和webpack版本,借助工具可以自动匹配对应版本.比如我项目中使用的是webpack4和node12,工具就会自动安装babel-loader8版本,不会安装最新的v9.

# 不安装，直接使用npx来执行
npx babel-upgrade --write

# 或是安裝 babel-upgrade 在 global 並執行
npm i -g babel-upgrade
babel-upgrade --write

执行命令后, package.json 中移除了旧版本的依赖，自动新增了新版依赖，

+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-loader": "^8.0.0",
-    "babel-preset-env": "^1.6.1",

2. 删除node_modules,重新安装依赖

# 删除node_module
rm -rf node_modules
# 重新安装
npm i

3. 修改配置文件.babelrc

// 原.babelrc文件
{
    "presets": [
      ["env", {
        "loose": true,
        "debug": false,
        "useBuiltIns": true,
        "targets": {
          "browsers": [ "ie > 8", "last 2 version", "safari >= 9" ]
        },
        "production": {
          "plugins": ["transform-remove-console"]
        }
      }]
    ],
    "plugins": [
      [ "transform-runtime", {
        "helpers": false,
        "polyfill": false,
        "regenerator": true } ],
      [ "transform-class-properties", { "spec": true } ],
      [ "transform-object-rest-spread", { "useBuiltIns": true } ],
      [ "transform-vue-jsx" ],
      [ "syntax-dynamic-import" ]
    ],
    "comments": false
  }

// 修改后.babelrc文件(其他所有配置都不需要了)
//@babel/preset-env 预设，能根据目标环境自动决定要使用的插件和转换规则，而无需手动安装和配置单个插件
{
  "presets": [["@babel/preset-env"]]
}

4. 修改webpack配置文件

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          hotReload: !isProduction
        },
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              cacheIdentifier: 'babel-loader',//修改这个位置,原来值为'true'修改为'babel-loader'
            },
          },
        ],
      }
    ],
  },

方式二: 安装指定语法plugin

1. 可选链操作符

1.安装

npm i -D @babel/plugin-proposal-optional-chaining

2.配置.babelrc

{
    "presets": [
      ["env"]
    ],
    "plugins": [
      [ "transform-runtime"],
      [ "transform-class-properties"],
      [ "@babel/plugin-proposal-optional-chaining"],//配置
      [ "transform-object-rest-spread"],
      [ "transform-vue-jsx" ],
      [ "syntax-dynamic-import" ]
    ],
    "comments": false
  }

2. 空位合并运算符

1.安装

npm i -D @babel/plugin-proposal-nullish-coalescing-operator

2.配置.babelrc

{
    "presets": [
      ["env"]
    ],
    "plugins": [
      [ "transform-runtime"],
      [ "transform-class-properties"],
      [ "@babel/plugin-proposal-nullish-coalescing-operator"],//配置
      [ "@babel/plugin-proposal-optional-chaining"],
      [ "transform-object-rest-spread"],
      [ "transform-vue-jsx" ],
      [ "syntax-dynamic-import" ]
    ],
    "comments": false
  }

通过插件方式,也可以实现使用es2020中的新语法,但更建议第一种方式.