本文分三个部分：

• 直接node运行js
• 通过package.json文件运行js
• 在ide中运行和调试js
  — vscode中，配置launch.json文件，来调试js
  — idea、webstorm中，打开js文件，右键运行或者调试即可

一、前置条件

• 安装node
• js文件

编写js简单样例

文件名index.js

console.log("hello js")
console.log("hello js")
console.log("hello js")
console.log("hello js")
console.log("hello js")

二、直接node运行js

进入文件所在目录，运行如下命令：

node index.js

效果如下：

三、通过package.json文件进行js运行管理

• 通过 package.json文件管理js脚本运行

1、生成 package.json文件

进入项目文件根目录，运行如下命令：

npm init

2、配置 package.json文件

在配置文件中，增加启动脚本

"start": "node ./index.js"

整体效果如下：

运行js脚本

在配置文件所在目录，运行如下命令：

npm run start

效果如下：

四、IDE中运行调试js

vscode配置launch.json文件仅能调试js文件，运行js文件参考node运行和package.json运行两种方案；idea中打开js文件会自动配置，可以运行，也可以调试，方便一些。

• vscode中，配置launch.json文件，来调试js
• idea、webstorm中，打开js文件，右键运行或者调试即可

1、vscode调试js文件

配置项如下：

        {
            "name": "debugCurrentJs",
            "type": "node",
            "request": "launch",
            "program": "${file}"
        }

注意：

• type为node，与调试html不一样，html的type为chrome
• 需要定义program项，即程序的启动入口，html 定义的是file项或者url项

vscode效果如下：

2、idea调试js文件

打开要调试的文件，在视图区域，右键，选择调试或者运行。
idea效果如下：

3、vscode调试js项目

1）本地编译并启动前端项目

一般流程如下，具体看package.json中得脚本配置

npm install //根据package.json，安装依赖
npm run build  //打包前端程序，src->dist
npm run serve  //本地启动服务

2）修改vscode中项目运行配置文件launch.json，增加如下配置

        {
            "name": "debugProject",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src"
        }

注意：

• 调试单个js文件，配置的是node 类型，外加program 来指定入口
• 调试整个js项目，配置的是chrome 类型，外加url地址 来指定绑定的应用，再加webRoot 来指定源码路径
• webRoot如果选择的是dist文件夹，则生成的js文件和源码的ts或js文件加断点都会命中；webroot如果选择的是src文件夹，则只有源码的ts或js文件加断点都会命中。

4、idea调试js项目

1）本地编译并启动前端项目

一般流程如下，具体看package.json中得脚本配置

npm install //根据package.json，安装依赖
npm run build  //打包前端程序，src->dist
npm run serve  //本地启动服务

2）增加调试配置

如下图所示，选择“javascript 调试”选项，并按照项目启动的端口号进行配置