JavaScript装饰器

随着 ES6 里引入了类，目前 ECMAScript 有一个提案，引入了装饰器（Decorator）函数来标注极或修改类及其成员。
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression 这种形式，expression 求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

关于装饰器的详细介绍请参阮一峰的《ECMAScript 6 入门》一书

稍微有点遗憾，装饰器并没有被标准化，不过我们可以使用 TypeScript, 或者利用 babel 进行转化

TypeScript 使用装饰器

TypeScript 要启用装饰器，你必须在命令行或 tsconfig.json 里启用 experimentalDecorators 编译器选项：

注意:   装饰器是一项实验性特性，在未来的版本中可能会发生改变。

命令行:

tsc --target ES5 --experimentalDecorators

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

详情请参考：https://www.tslang.cn/docs/handbook/decorators.html

babel 转化装饰器

装饰器的转化依赖一个核心插件 babel-plugin-transform-decorators-legacy。

npm i -D babel-core babel-loader babel-preset-es2015
npm i -D babel-plugin-transform-decorators-legacy

.babelrc

{
  "presets": [
    // 把es6转成es5
    "babel-preset-es2015"
  ],
  // 把装饰器语法转成es5
  "plugins": ["transform-decorators-legacy"]
}