本文已同步在掘金: https://juejin.im/post/5ceb48bbf265da1ba2523c77

在看的各位都是来司机或者即将成为老司机的鲜肉们都知道 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 风格检查工具,有大把现成的规则集供选择,比如 googleairbnb

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

剩下的 errorwarings 就是你的事了

You can

上一章:为什么选择 npm script

下一章:运行多个 npm script