NodeJS 无法直接运行ES6装饰器JS文件

NodeJS 无法直接运行ES6装饰器JS文件

ES6装饰器官方链接 https://es6.ruanyifeng.com/#docs/decorator

1. 创建ES装饰器函数

• 文件结构

  PS E:\decorator-demo> tree /F
  卷 逗你笑 的文件夹 PATH 列表
  卷序列号为 0002-5E4A
  E:.
  │  babel.config.json
  │  package-lock.json
  │  package.json
  │
  └─src
          BasePage.js
          localeDecorators.js
          Page.js
  
  PS E:\decorator-demo>
  

• localDecorators.js 国际化装饰器

/**
 * 国际化装饰器
 * @param {class} target
 */
function localDecorators(target) {
  target.prototype._locale = {
    en: {
      name: 'zhangsan'
    },
    zh: {
      name: '张三'
    }
  }
}

export default localDecorators;

• BasePage.js 父类对象使用装饰器

import localDecorators from "./localeDecorators.js";

@localDecorators
class BasePage {
  constructor(data) {
    this.data = data;
  }

  onLoad() {
    console.log(this.data);
    console.log(this._locale);
  }

}

export default BasePage;

• Page.js 集成父类BasePage.js，Page.js做入口文件

import BasePage from "./BasePage.js";

class Page extends BasePage {
  constructor(data) {
    super(data);
  }
}

// 调用
new Page({
  age: 18
}).onLoad();

2. 使用Node运行Page.js文件

PS E:\decorator-demo> node .\src\Page.js
file:///E:/decorator-demo/src/BasePage.js:3
@localDecorators
^

SyntaxError: Invalid or unexpected token
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:117:18)      
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:337:14)
PS E:\decorator-demo>

根据提示错误可知是语法错误，推测可能是Node不支持ES6装饰器语法。

经过一番查找之后，终于知道JavaScript目前还不支持装饰器，换处于提案之中。废话不多说，直接上TC39装饰器链接：https://github.com/tc39/proposal-decorators

目前可知babel插件已经实现转换装饰器为JavaScript支持的类型，直接上链接：https://babeljs.io/docs/en/babel-plugin-proposal-decorators#options

3.配置babel插件，编译JS文件

babel官方链接 https://babel.docschina.org/docs/en/usage/#plugins–presets

• 参考babel使用指南，安装babel

# 安装babel/core babel/cli babel/preset-ent
npm install --save-dev @babel/core @babel/cli @babel/preset-env
# 安装 babel/plugin-proposal-decorators插件，用于编译ES6装饰器
npm install --save-dev @babel/plugin-proposal-decorators

• 项目根目录创建babel.config.js或者.babelrc配置文件，并配置相应插件内容

  tip：preset内容暂时没有任何用

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ],
   "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-class-properties"
  ]
}

• 使用npm查看安装 的依赖文件

PS E:\decorator-demo> npm list
decorator-demo@1.0.0 E:\decorator-demo
├── @babel/cli@7.17.10
├── @babel/core@7.18.2
├── @babel/plugin-proposal-decorators@7.18.2
└── @babel/preset-env@7.18.2

PS E:\decorator-demo>

• 使用babel编译相应的JS文件目录，高版本可使用npx babel简化 .\node_modules.bin\babel指令

PS E:\decorator-demo> npx babel src --out-dir lib
Successfully compiled 3 files with Babel (381ms).
PS E:\decorator-demo> 

或者使用 .\node_modules.bin\babel指令编译

PS E:\decorator-demo> .\node_modules\.bin\babel  src --out-dir .\lib      
Successfully compiled 3 files with Babel (322ms).
PS E:\decorator-demo> 

4. 使用如下命令运行JS文件

PS E:\decorator-demo> node .\lib\Page.js
{ age: 18 }
{ en: { name: 'zhangsan' }, zh: { name: '张三' } }
PS E:\decorator-demo>

至此，NODEJS上无法直接运行ES6装饰器问题已解决。