npm script 一见钟情

本文已同步在我的博客: ruizhengyun.cn/blog/post/7…

在看的各位都是老司机或者即将成为老司机的鲜肉们都知道 package.json 了（别皮了，别说不知道啊），不过老司机的我还是要说下如何科学用它。如果你是科学用的可以跳过本章。

快速创建项目

npm script 依赖于文件 package.json。npm 为我们提供了快速创建 package.json 文件命令 npm init，执行会让你回答几个基本问题，如包名称、版本号、作者信息、入口文件、仓库地址、许可协议等，大多数都有默认值，你只需傻瓜式的敲回车就好。

package name: (project)
version: (0.1.0)
description: 
entry point: (index.js)
test command:
git repository:
keywords: 
license: (MIT)
复制代码

package name 默认是项目文件夹名称，然后我很懒，一路回车下来，然后得到 package.json,

{
  "name": "project",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ruizhengyun <ruizhengyun@gmail.com> (https://github.com/ruizhengyun)",
  "license": "MIT"
}
复制代码

如果想要修改，可以直接改文件，也可以重新 npm init 如果你不嫌烦的话。有人问，既然都是默认值，按可有跳过参数问答环节，快速生成 package.json。我想说，必须有啊，你都这么想了，作者肯定想到了。

npm init --force
npm init -f
npm init --yes
npm init -y
复制代码

设置默认配置值

细心童鞋会发现 author 这栏信息很详细，它怎么知道我的账号和邮箱还有github 地址的，太可怕了，城市套路这么深。no,no,no,不要怕，这是我之前就设置过的，为了省事，说白了就是懒（也是有学问的，DRY 原则）。那怎么配置呢？

npm config set init.author.name "ruizhengyun"
npm config set init.author.email "ruizhengyun@gmail.com"
npm config set init.author.url "http://github.com/ruizhengyun"
npm config set init.license "MIT"
npm config set init.version "0.13.14"
复制代码

删除 package.json, 然后 npm init -y。

执行任意命令

打开 package.json，有这么一栏

scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
复制代码

在终端运行 npm run test，会看到输出的是 Error: no test specified。为什么会输出这个呢，因为你写的就是要输出它嘛。

npm run test 也可简写 npm test（内置命令）或 npm t，就是让你变懒。也可安装 npm install -g ntl，然后命令行敲击 ntl,然后通过方向键选择要执行的命令，最后回车，实战中可实用（别说我没告诉过你）。

上面说了内置命令，同样 npm start 也是内置支持的命令，但是你的在 package.json 中的 scripts 中加上 start 对应的命令内容才行。

说说 npm run

npm 是如何管理和执行各种 scripts 的呢？作为内置核心功能，npm run 实际上是 npm run-script 命令的简写（就是懒，没毛病）。每次我们执行 npm run xxx的时候（想起一首歌的歌词），流程如下：

从 package.json 文件中读取 scripts 对象里面的全部配置；
以传给 npm run 的第一个参数作为键，如 xxx，在 scripts 对象里面获取对应的值作为接下来要执行的命令，如果没找到直接报错；
在系统默认的 shell 中执行上述命令，系统默认 shell 通常是 bash，windows 环境下可能略有不同，稍后再讲。（换电脑吧，前端程序员配个 mac,要懂得投资自己，男生女生都是）

举个栗子：

{
  "name": "project",
  "version": "0.13.14",
  "description": "",
  "main": "index.js",
  "scripts": {
    "xxx": "eslint **.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "ruizhengyun <ruizhengyun@gmail.com> (https://github.com/ruizhengyun)",
  "license": "MIT"
}
复制代码

如果不带任何参数，执行 npm run，我只能说你真懒，不该懒的时候懒只会坑自己，它会列出可执行的所有命令，就像下面这样

Lifecycle scripts included in project:
  test
    echo "Error: no test specified" && exit 1

available via `npm run-script`:
  xxx
    eslint **.js
复制代码

所以要懂得什么时候该懒，什么时候不该（懒也是一门学问哦）。

再多句嘴，知道上面 eslint 命令怎么来的? 其实，在 npm 执行指定 script 之前会把 node_modules/.bin 加到环境变量 $PATH 的前面，这就意味着任何内含可执行的文件的 npm 依赖都可以在 npm script 中直接调用。听不明白？就是你不需要在 npm script 中加上可执行的完整路径，如

scripts: {
    "xxx": "./node_modules/.bin/eslint **.js"
}
复制代码

又扯到懒的学问了...

创建自定义的 npm script

说点有用的，不说 xxx 了。接下了创建我们的项目hello-npm-script,然后添加实用脚本 eslint。

普及下 eslint 是社区中接受度比较高的 javascript 风格检查工具，有大把现成的规则集供选择，比如 google、airbnb

1.上需要被 eslint 的代码

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom';

const Comment = () => (<div>子组件</div>);

const App = () => {
  const name = 'npm script';
  return (
    <div>
      <h2>app</h2>
    </div>
  );
};

ReactDOM.hydrate(<App />, document.getElementById('#root'));
复制代码

2.添加依赖包 eslint

npm install -D eslint
// 或
npm install --save-dev eslint
复制代码

3.初始化 eslint 用 eslint 检查需要规则集，而存放规则集的文件就是配置文件，那规则文件需要如下文件生成（命令行）

./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? What format do you want your config file to be in? JavaScript
? Would you like to install them now with npm? Yes

Successfully created .eslintrc.js file in /Users/ruizhengyun/dev/tutorial/npm-script/project
复制代码

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

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
  },
};
复制代码

4.添加命令 eslint 在 package.json 的 scripts 字段中新增命令 eslint

{
    "scripts: {
        "eslint": "eslint **.jsx"
    }    
}
复制代码

5.执行命令 eslint 还等什么？做了这么多不就等这一刻么

npm run eslint
// 或
ntl
然后选择 eslint
复制代码

剩下的 error 和 warings 就是你的事了

You can

上一章：npm script 为什么选择她

下一章：npm script 多命令的运行