NodeJS项目中Stage3 JS装饰器与Babel、nodemon配合失效求助

方案一：基于编译产物运行（推荐生产/开发通用） #

问题原因 #

原start脚本仅在首次启动时执行编译，后续nodemon只监听dist/app.js的变化，不会自动重新编译src目录的代码修改，导致运行的始终是旧版本产物。

修改配置 #

更新package.json的scripts字段：

"scripts": {
  "build": "babel src -d dist",
  "start": "nodemon --watch src --exec \"npm run build && node dist/app.js\""
}

• --watch src：让nodemon监听src目录下所有文件的变化
• --exec "npm run build && node dist/app.js"：当文件变更时，先重新编译代码到dist目录，再启动最新的编译产物

方案二：直接用babel-node运行（仅开发环境） #

问题原因 #

原.babelrc中装饰器插件的顺序靠后，导致babel-node无法优先解析装饰器语法，触发语法错误。

修改步骤 #

1. 确保安装@babel/node（未安装则执行）：

npm install --save-dev @babel/node

2. 调整.babelrc的插件顺序，将装饰器插件移至最前：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ],
  "env": {
    "development": {
      "sourceMaps": "inline",
      "retainLines": true
    }
  },
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "version": "2022-03"
    }],
    "@babel/plugin-syntax-top-level-await"
  ]
}

3. 保持原启动脚本不变：

"scripts": {
  "start-nodemon": "nodemon --exec babel-node src/app.js"
}

验证方法 #

修改module.js中getDescription的返回值，保存后查看控制台：

• 方案一：会先显示编译日志，随后输出更新后的内容
• 方案二：进程会自动重启并直接输出更新后的内容

内容的提问来源于stack exchange，提问作者Anatoly