配置node开发环境

场景简介

手上有一个正在开发的NodeJS项目，由于编码使用的是ES Module模块化规范，所有需要使用babel来编译并调试。
开发环境需求有以下几点

• 使用Visual Studio Code作为开发IDE
• 支持ES Module模块化规范
• 支持以调试的方式启动
• 支持npm方式启动
• 支持文件变更，自动重启
  假设项目目录结构如下

  .
  |-- app.js // 程序入口文件
  |-- .babelrc // babel配置
  |-- node_modules
  |-- nodemon.json // nodemon配置
  |-- package.json
  `-- .vscode
  |   `-- launch.json
  `-- package-lock.json

用到的工具

• babel 用来编译ES代码（Babel 7版本）
• babel-node 这个是@bable/cli（Babel6 cli提供者是babel-cli）提供的命令行工具，可以编译并运行es代码
• nodemon 这个可以以指定配置监听项目文件变化，并重启

配置

安装依赖

工具可以全局安装或者项目本地安装

// CLI工具
> npm i @babel/cli nodemon -g
// 开发依赖
> npm i @babel/core @babel/node @babel/preset-env -D

配置

配置babel

因为要使用到ES Module，所以需要配置babel。在项目根目录新建.bablerc，并配置如下

{
  "presets": [
    "@babel/preset-env"
  ],
  "env": {
    "debug": {
      "sourceMaps": "inline",
      "retainLines": true
    }
  }
}

在package.json 中配置启动命令如下。如此就可以运行npm start来编译并启动app.js

"scripts": {
    "start": "babel-node ./app.js",
}

配置nodemon

由于nodemon的命令行参数比较多不易管理，所以采用配置文件的方式来配置nodemon。在项目根目录下新建nodemon.json,并填写配置如下，记得清除注释

{
    // nomon启动/重启时，打印日志
    "verbose": true,

    // 如果开发的项目不是js项目，这个配置项会很有用
    // "execMap": {
    //     "": "node",
    //     "js": "babel-node"
    // },
    // 忽略监听的目录
    "ignore": [
        "*.test.js",
        "fixtures/*",
        "node_modules/**/node_modules"
    ],
    // 监听目录
    "watch": [
        "Views"
    ],
    // 设置环境变量
    "env": {
        "NODE_ENV": "development"
    },
    // 支持生命周期事件，比如重启后并执行命令
    // "events": {
    //     "restart": "echo \" ------------- \""
    // },

    // 要监听的文件后缀
    "ext": "js,json,html,css"
}

在package.json 中配置启动命令如下。如此就可以启动app.js，并自动重启。

"scripts": {
    "dev": "nodemon --exec babel-node app.js --config nodemon.json"
}

配置debug

调试功能是跟IDE相关的。使用Visual Studio Code的话：

• 首先从菜单命令运行–打开配置–选中nodejs来新建调试配置文件。
  如果一切顺利的话，这个操作之后会在项目根目录下出现.vscode目录及其中包含的launch.json。
• 接着从菜单命令运行–添加配置–选中通过npm启动来调整调试配置。
• 修改launch.json文件内容如下。

关于更多的调试配置可以参考官方文档

{
    "version": "0.2.0",
    "configurations": [
        // 支持自动刷新的调试
        {
            "type": "node",
            "request": "launch",
            "name": "使用npm启动",
            "runtimeExecutable": "npm",
            "console": "integratedTerminal",
            "runtimeArgs": [
                "run-script",
                "dev"
            ],
            "skipFiles": [
                "<node_internals>/**"
            ]
        },
        // 不自动刷新的配置
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "使用babel-node启动",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
            "program": "${workspaceRoot}/app.js"
        }
    ]
}

接下来就可以在开发中打断点了，Visual Studio Code断点调试能够在运行时显示断点处的上下文中变量的诸多信息，这让开发者很方便地诊断出程序的错误原因。

后记

这里只是记录下配置过程中的关键步骤和配置信息，由于具体的宿主环境不一致，使用上文中的配置出现一些问题都是很有可能的。

错误1：启动调试报错

错误信息：Can’t find Node.js binary “node”: /usr/bin/env: node: No such file or directory
解决方法：

// 查找node所在目录
> which node

// 建立软链
> ln -s /path/to/node /usr/local/bin/node
// 注意替换 /path/to/node

npm启动方式也肯能会遇到以上错误，处理方法类似的