一.初识 npm

1.创建项目

npm init

执行该命令会问几个基本问题，如包名称、版本号、作者信息、入口文件、仓库地址、许可协议等，多数问题已经提供了默认值

package name: (demo)
version: (0.1.0)
description: hello npm script
entry point: (index.js)
test command:
git repository:
keywords: npm, script
license: (MIT)

上面的例子指定了描述（description）和关键字（keywords）两个字段，基本问题问完之后 npm 会把 package.json 文件内容打出来供你确认

{
  "name": "demo",
  "version": "0.1.0",
  "description": "hello npm script",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["npm", "script"],
  "author": "zhoubichuan <zhoubichuan@icloud.com> (https://github.com/zhoubichuan)",
  "license": "MIT"
}

如果要修改 package.json，可以再次运行 npm init，npm 默认不会覆盖修改里面已经存在的信息

提示

• 可以使用 npm init -f（意指 --force），或者 npm init -y （意指 --yes）告诉 npm 直接跳过参数问答环节，快速生成 package.json

初始化 package.json 时的字段默认值是可以自己配置的

npm config set init.author.email "zhoubichuan@icloud.com"
npm config set init.author.name "zhoubichuan"
npm config set init.author.url "http://github.com/zhoubichuan"
npm config set init.license "MIT"
npm config set init.version "0.1.0"

快速初始化一个项目

cd ~
mkdir demo && cd $_
npm init
npm init -f

2. 执行任意命令

使用 npm init 创建的 package.json 文件中包含了 scripts 字段：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

在终端中运行 npm run test，能看到 Error: no test specified 的输出。npm run test 可以简写为 npm test，或更简单的 npm t，得到的结果是几乎相同的。npm test 顾名思义，就是运行项目测试。

和 test 类似，start 也是 npm 内置支持的命令，但是需要先在 scripts 字段中声明该脚本的实际内容

npm run 实际上是 npm run-script 命令的简写。当我们运行 npm run xxx 时，基本步骤如下

• 从 package.json 文件中读取 scripts 对象里面的全部配置
• 以传给 npm run 的第一个参数作为键，本例中为 xxx，在 scripts 对象里面获取对应的值作为接下来要执行的命令，如果没找到直接报错
• 在系统默认的 shell 中执行上述命令，系统默认 shell 通常是 bash，windows 环境下可能略有不同

注意，上面这是简化的流程

举例来说，如果 package.json 文件内容如下：

{
  "name": "demo",
  "devDependencies": {
    "eslint": "latest"
  },
  "scripts": {
    "eslint": "eslint **.js"
  }
}

如果不带任何参数执行 npm run，它会列出可执行的所有命令

Available scripts in the myproject package:
  eslint
    eslint **.js

如果运行 npm run eslint，npm 会在 shell 中运行 eslint **.js。

有没有好奇过上面的 eslint 命令是从哪里来的？

其实，npm 在执行指定 script 之前会把 node_modules/.bin 加到环境变量 $PATH 的前面，这意味着任何内含可执行文件的 npm 依赖都可以在 npm script 中直接调用，换句话说，你不需要在 npm script 中加上可执行文件的完整路径，比如 ./node_modules/.bin/eslint **.js。

3. 自定义命令

知道如何运行 npm script 之后，接下来我们在 hello-npm-script 项目中添加有实际用途的 eslint 脚本，eslint (opens new window) 是社区中接受度比较高的 javascript 风格检查工具，有大把现成的规则集可供你选择，比如 google (opens new window)、 airbnb (opens new window)。

在新项目或者任何现有项目中添加 eslint 自定义脚本的步骤如下：

3.1 准备被检查的代码

要做代码检查，我们必须有代码，创建 index.js 文件，输入如下内容：

const str = 'some value';

function fn(){
    console.log('some log');
}

3.2 添加 eslint 依赖

执行如下命令将 eslint 添加为 devDependencies：

npm install eslint -D

3.3 初始化 eslint 配置

用 eslint 做检查需要配置规则集，存放规则集的文件就是配置文件，使用如下文件生成配置文件：

./node_modules/.bin/eslint --init

TIP#3: 把 eslint 安装为项目依赖而非全局命令，项目可移植性更高。

在命令行提示中选择 Answer questions about your style，如下图回答几个问题，答案可以根据自己的偏好：

回车后根目录下就有了 .eslintrc.js 配置文件：

module.exports = {
  env: {
    es6: true,
    node: true,
  },
  extends: 'eslint:recommended',
  rules: {
    indent: ['error', 4],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
  },
};

3.4 添加 eslint 命令

在 package.json 的 scripts 字段中新增命令 eslint：

{
  "scripts": {
    "eslint": "eslint *.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

手动修改 package.json 时一定要注意语法正确。

3.5 运行 eslint 命令

执行 npm run eslint，可以看到，按照官方推荐规则代码里有 3 处不符合规范的地方：

4. eslint 完成代码检查

使用 eslint-plugin-react (opens new window) 检查 react 代码，使用 react-plugin-react-native (opens new window) 检查 react-native 代码，如果你比较懒，可以直接使用 eslint-config-airbnb (opens new window)，里面内置了 eslint-plugin-react，新人常遇到 peerDependencies 安装失败问题可参照 npmjs 主页上的如下方法解决：

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

推荐使用 vue.js 官方的 eslint 插件：eslint-plugin-vue (opens new window) 来检查 vue.js 代码，具体的配置方法官方 README 写的清晰明了，这里就不赘述了。

上面的几种 eslint 规则集的官方仓库都列出了各自支持的规则，如果你需要关闭某些规则，可以直接在自己的 .eslintrc* 里面的 rules 中配置，比如我们仓库里面的：

module.exports = {
  env: {
    es6: true,
    node: true,
  },
  extends: 'eslint:recommended',
  rules: {
    indent: ['error', 2],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
  },
};