Babel7 如何在项目中使用 decorators 语法
在现代的前端开发中，使用装饰器（decorators）语法已经成为了一种常见的编程方式。装饰器可以方便地给类和方法添加额外的功能，使得代码更加简洁和易于维护。然而，由于装饰器语法还未被 JavaScript 标准化，因此在项目中使用装饰器需要通过 Babel 转译器来实现。
本文将介绍如何在项目中使用 Babel7 来转译装饰器语法，并提供示例代码和实用的指导意义。
安装 Babel7
首先，需要安装 Babel7 及其相关插件。可以通过以下命令进行安装：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-decorators
其中，@babel/core 是 Babel7 的核心模块，@babel/cli 是 Babel7 的命令行工具，@babel/preset-env 是 Babel7 的预设模块，用于根据目标环境自动选择需要的插件，@babel/plugin-proposal-decorators 则是 Babel7 的装饰器插件。
配置 Babel7
安装完成后，需要在项目的根目录下创建一个 .babelrc 文件，并添加以下配置：
// javascriptcn.com 代码示例
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
},
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}其中，@babel/preset-env 的 targets 字段用于指定目标环境，这里设置为最近的两个版本和 IE 11。useBuiltIns 字段用于自动引入需要的 polyfill，corejs 字段指定使用的 polyfill 版本。@babel/plugin-proposal-decorators 的 legacy 字段用于启用 decorators 语法。
使用装饰器
配置完成后，就可以在项目中使用装饰器了。以下是一个示例代码：
// javascriptcn.com 代码示例
class Person {
@readonly
name = '张三';
@nonenumerable
get age() {
return 18;
}
}
function readonly(target, key, descriptor) {
descriptor.writable = false;
return descriptor;
}
function nonenumerable(target, key, descriptor) {
descriptor.enumerable = false;
return descriptor;
}
const person = new Person();
console.log(person.name); // "张三"
person.name = '李四'; // 报错，无法修改 name 属性
console.log(person.age); // 18
console.log(Object.keys(person)); // []在上面的示例代码中，@readonly 和 @nonenumerable 分别是两个装饰器函数，用于给类的属性添加只读和不可枚举的特性。在 Person 类中，name 属性被标记为只读，age 属性被标记为不可枚举。在实例化 Person 类后，只能读取 name 属性的值，无法修改它，同时 age 属性不会出现在 Object.keys(person) 的结果中。
总结
通过 Babel7 和装饰器语法，可以方便地给类和方法添加额外的功能，提高代码的可读性和可维护性。在使用装饰器时，需要注意装饰器函数的参数和返回值，以及 Babel7 的配置和插件的使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657f33ded2f5e1655da11bc0