package.json里的scripts属性

npm 允许在package.json文件里面，使用scripts字段定义脚本命令

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev"
  },

npm 脚本的原理

npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。

比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。

这意味着，当前目录的node_modules/.bin子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径。因此package.json里看到的命令都没有加上路径

npx

node包运行器npx可以运行使用 Node.js 构建并通过 npm 仓库发布的代码。

特性一：轻松地运行本地命令

运行 npx commandname 会自动地在项目的 node_modules 文件夹中找到命令的正确引用，而无需知道确切的路径，也不需要在全局和用户路径中安装软件包。
换句话说：以上面scripts代码为例，在当前项目的终端直接运行webpack-dev-server --inline --progress --config build/webpack.dev.conf.js命令，报错：command not found，因为webpack-dev-server没有在全局安装。正如npm 脚本的原理中所说，npm run dev命令分两部分，npm run负责自动新建一个 Shell并将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样，所以npm run dev命令可以执行后面的脚本（webpack-dev-server --inline --progress --config build/webpack.dev.conf.js）当然，直接在项目目录的终端中运行./node_modules/.bin/webpack-dev-server --inline --progress --config build/webpack.dev.conf.js也是可以的。重点来了，npx就可以解决这个要加相对路径才能访问非全局引用的问题，npx可以轻松地运行本地命令，所以可以通过 npx webpack-dev-server --inline --progress --config build/webpack.dev.conf.js运行命令。

特性二：无需安装的命令执行

使用cowsay来演示，使用 cowsay 命令。 cowsay 会打印一头母牛，并在命令中说出你写的内容。例如：

cowsay "你好" 会打印：

只有之前已从 npm 全局安装了 cowsay 命令，才可以这样做，否则，当尝试运行该命令时会获得错误。
npx 可以运行该 npm 命令，而无需在本地安装。运行npx cowsay "你好"命令就会打印

使用 @version 语法运行同一命令的不同版本

例如：使用不同的 Node.js 版本运行代码

npx node@10 -v #v10.18.1
npx node@12 -v #v12.14.1

这有助于避免使用 nvm 之类的工具或其他 Node.js 版本管理工具

直接从 URL 运行任意代码片段

npx 并不限制使用 npm 仓库上发布的软件包。

可以运行位于 GitHub gist 中的代码，例如：

npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32

当然，当运行不受控制的代码时，需要格外小心，因为强大的功能带来了巨大的责任。

参考：dev.nodejs.cn/learn/the-n… www.ruanyifeng.com/blog/2016/1…

package.json里的scripts属性及npx使用