npm 包 babel-plugin-property-literals 使用教程

什么是 babel-plugin-property-literals

babel-plugin-property-literals 是一个babel插件，用于简化属性命名。

在 ES6 语法中，我们经常使用属性缩写的语法：

const name = 'John'
const age = 18
const person = {
  name,
  age
}

这样可以让我们的代码更加简洁易读。但是当我们使用 babel 编译成 ES5 语法时，代码会变成：

var name = 'John';
var age = 18;
var person = {
  name: name,
  age: age
};

代码比原来多了很多冗余代码，对代码的可读性也不是很友好。那么这时候我们就需要 babel-plugin-property-literals 来简化属性命名。

使用 babel-plugin-property-literals

安装

npm install --save-dev babel-plugin-property-literals

配置

在 .babelrc 中配置插件：

{
  "plugins": [
    "babel-plugin-property-literals"
  ]
}

示例

经过配置之后，我们在代码中再次使用 ES6 的属性缩写语法：

const name = 'John'
const age = 18
const person = {
  name,
  age
}

经过 babel-plugin-property-literals 转义后，代码就变成了：

var name = 'John';
var age = 18;
var person = {
  name,
  age
};

代码量变少了，可读性也增强了。

意义与学习

babel-plugin-property-literals 可以让我们的代码更加简洁易读，减少冗余代码。学习这个插件也可以加深我们对 babel 配置的理解，同时也可以加强我们对 ES6 语法的掌握。

总结

babel-plugin-property-literals 是一个实用的插件，使用非常简单，可以让我们的代码更加简洁易读。学习这个插件也可以加深我们对 babel 配置的理解，同时也可以加强我们对 ES6 语法的掌握。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb56eb5cbfe1ea0611431