JavaScript Dev Toolkit

Node.js 是基于 Google V8 引擎的服务端 JavaScript 环境，
npm 是内置在 Node.js 中的一个 JavaScript 包管理工具。类似于 Perl 中的 CPAN。

Grunt 是一个 Javascript Task Runner（Javascript 任务运行器），可用于自动化构建、测试、生成文档的项目管理工具。

$ npm install -g grunt-cli
$ npm install -g grunt

Yeoman 是一个脚手架工具，可以方便的为你产生一个初始项目，标准的文件夹布局，标准的包依赖，初始的页面例子。Yeoman 提供一些 generators，用来生成不同的项目。

$ npm install -g yo

ESLint 是 JavsScript 静态分析工具，可以发现 JavsScript 代码中潜在的问题。类似的工具还有JSLint ，JSHint。

$ npm install -g eslint      # 安装ESLint
$ eslint --init              # 第一次运行ESLint时，需要先运行 eslint --init 来生成配置文件
$ eslint yourfile.js         # 使用ESLint分析文件yourfile.js

ESLint 支持的配置文件格式有很多，比如“.eslintrc.yaml”（YAML 格式）或者“.eslintrc.json”（JSON 格式）等等。

下面是文件“.eslintrc.json”的一个例子：

{
    "env": {
        "browser": true,
    },
    "extends": "eslint:recommended",
    "globals": {
        "$": true
    },
    "rules": {
        "linebreak-style": [
            "error",
            "unix"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-unused-vars": [
            "error",
            { "vars": "local" }
        ]
    }
}

配置规则时，可以使用"off"来禁止它，或者"warn"/"error"来打开它，具体含义如下：
"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code will be 1)

参考：http://eslint.org/

js-beautify 是一个代码格式化工具，它不仅支持格式化 JavaScript，还格式化 css 和 html 代码。

js-beautify 安装：

$ npm -g install js-beautify   # 安装

js-beautify 使用：

$ js-beautify -r foo.js           # -r 表示replace，即直接修改原文件
$ css-beautify -r foo.css         # 相当于 js-beautify --css foo.css
$ html-beautify -r foo.html       # 相当于 js-beautify --html foo.html

js-beautify 配置：可以使用文件“.jsbeautifyrc”对 js-beautify 进行设置。下面是“.jsbeautifyrc”的一个例子：

{
    "indent_size": 4,
    "html": {
        "end_with_newline": true,
        "js": {
            "indent_size": 2
        },
        "css": {
            "indent_size": 2
        }
    },
    "css": {
        "indent_size": 1
    },
    "js": {
       "preserve-newlines": true
    }
}

注：文件“.jsbeautifyrc”可以放到当前目录（ $PWD ）到根目录的任何一个目录中。

参考：https://www.npmjs.com/package/js-beautify

mocha 是流行的 JavaScript 测试框架之一，在浏览器和 Node 环境都可以使用。

假设 add.js 内容为：

// add.js
function add(x, y) {
  return x + y;
}

module.exports = add;

下面是测试代码（假设文件名为 add.test.js）：

// add.test.js
var add = require('./add.js');
var expect = require('chai').expect;

describe('加法函数的测试', function() {
  it('1 加 1 应该等于 2', function() {
    expect(add(1, 1)).to.be.equal(2);
  });

  it('1 加 -1 应该等于 0', function() {
    expect(add(1, -1)).to.be.equal(0);
  });
});

下面是使用 mocha 运行上面测试代码的输出：

$ mocha add.test.js


  加法函数的测试
    ✓ 1 加 1 应该等于 2
    ✓ 1 加 -1 应该等于 0


  2 passing (9ms)

参考：测试框架 Mocha 实例教程

Babel 是一个 JavaScript 转码器，可以将 ES6 代码转为 ES5 代码，这样你不用担心新语法在当前环境中不被支持。

参考：https://babeljs.io/

pm2 是一个 Node 进程管理器，它有下面一些功能：

• 负载均衡
  
• 应用 crash 后自动重启
  
• 日志管理
  
• 等等
  

下面是使用 pm2 list 查看当前系统中 pm2 所管理的 Node 进程的例子：

$ pm2 list
┌──────────┬────┬──────┬─────┬────────┬───────────┬────────┬─────────────┬──────────┐
│ App name │ id │ mode │ PID │ status │ restarted │ uptime │      memory │ watching │
├──────────┼────┼──────┼─────┼────────┼───────────┼────────┼─────────────┼──────────┤
│ myApp    │ 0  │ fork │ 931 │ online │         1 │ 5s     │ 123.139 MB  │ disabled │
└──────────┴────┴──────┴─────┴────────┴───────────┴────────┴─────────────┴──────────┘
 Use `pm2 info <id|name>` to get more details about an app

参考：http://pm2.keymetrics.io/

forever 也是一个 Node 进程管理器，可以代替 pm2。

下面是使用 forever list 查看当前系统中 forever 所管理的 Node 进程的例子：

$ npx forever list
info:    Forever processes running
data:        uid  command                                          script   forever pid     id logfile                      uptime
data:    [0] hYBT /home/user1/app/node-v14.17.5-linux-x64/bin/node index.js 1278317 1278324    /home/user1/.forever/log.txt STOPPED
data:    [1] 6pde /home/user1/app/node-v14.17.5-linux-x64/bin/node index.js 1278629 1278636    /home/user1/.forever/log.txt STOPPED
data:    [2] 1UEI /home/user1/app/node-v14.17.5-linux-x64/bin/node index.js 1278895 1278902    /home/user1/.forever/log.txt STOPPED

参考：https://github.com/foreversd/forever

Webpack 是一个模块打包工具，它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

有了 Webpack，引入模块时我们不用关心模块的依赖关系，它把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack 将从这个文件开始找到你的项目的所有依赖文件，最后打包为一个（或多个）浏览器可识别的 JavaScript 文件，如图 1 所示。

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。比如我们需要在应用中打包 css 文件，就需要使用到 css-loader 和 style-loader。

参考：https://webpack.js.org/guides/getting-started