obj?.obj 可选链插件

@babel/plugin-proposal-optional-chaining

安装

1
npm install @babel/plugin-proposal-optional-chaining --dev

配置

babel.config.js

1
2
3
4
5
6
7
8
9
10
11
12
let plugins = [
  '@babel/plugin-proposal-optional-chaining' // 该插件支持可选链语法
]
module.exports = {
  compact: false,
  presets: [
    ['@vue/app', {
      useBuiltIns: 'entry'
    }]
  ],
  plugins: plugins
}

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42

const safe = obj?.qux?.baz; // undefined

// Optional chaining and normal chaining can be intermixed
obj?.foo.bar?.baz; // Only access `foo` if `obj` exists, and `baz` if
// `bar` exists

// Example usage with bracket notation:
obj?.["foo"]?.bar?.baz; // 42

?? 操作符插件

@babel/plugin-proposal-nullish-coalescing-operator

安装

1
npm install @babel/plugin-proposal-nullish-coalescing-operator --dev

配置

babel.config.js

1
2
3
{
  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

案例

1
var foo = object.foo ?? "default";

移除console.log()

babel-plugin-transform-remove-console

安装

1
npm install babel-plugin-transform-remove-console --dev

配置

babel.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let plugins = []
let transformRemoveConsole = ['transform-remove-console', { "exclude": ["error", "warn"] }]
// 生产模式加入
if (process.env.NODE_ENV === 'production') {
  plugins.push(transformRemoveConsole)
}
module.exports = {
  compact: false,
  presets: [
    ['@vue/app', {
      useBuiltIns: 'entry'
    }]
  ],
  plugins: plugins
}