package.json

"scripts": {   ...   "watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",   "watch:js": "onchange 'src/js/*.js' -- npm run build:js", }

使用 npm scripts 钩子创建任务

pre- 和 post- 脚本命令， npm run 为每条命令提供了 pre- 和 post- 两个钩子(hook)。以 npm run install 为例，如果我们的 scripts 字段定义了 postinstall ：

package.json

"scripts": {   ...   "postinstall": "npm run watch:all" }

执行 npm run install 时，任务 postinstall 也会立即执行，在团队里，这是一种非常好的协作方式，当有人克隆我们的代码后，执行 npm install ，我们的 watch:all 任务也会跟着执行，它会自动的开启一个服务器并打开默认的浏览器，同时也会监听文件的修改。

使用内部变量

scripts 字段可以使用一些内部变量，主要是 package.json 的各种字段。内部变量的主要特征是 $npm_package_key 。

比如， package.json 的内容是

{   "name":"mobile-scaffold",   "version":"1.0.0" }

那么变量 $npm_package_name 的值是 mobile-scaffold ，变量 npm_package_version 的值是 1.0.0 。

{   "version": "1.0.0",   "scripts": {     ...     "bundle": "mkdir -p build/$npm_package_version/"   } }

运行 npm run bundle 以后，将会生成 build/1.0.0/ 子目录。

config 字段也可以用于设置内部字段。

{   "name": "mobile-scaffold",   "config": {     "port": "3000"   },   "scripts": {     ...     "serve": "http-server -p $npm_package_config_port"   } }

上面代码中，变量 npm_package_config_port 对应的就是 3000 。

使 npm run 命令可以接收参数

在一些任务里，我们需要根据不同的情形来传递参数，最常见的例子就是提交 git commit -m 需要填写一些信息，这时， npm run 能接收参数就显得非常重要了。

package.json 的内容是：

{   "name": "mobile-scaffold",   "scripts": {     ...     "preci": "git add -A",     "ci": "git commit -m",     "postci": "git push origin master"   } }

运行 npm run ci -- "add git command task" ，这条命令执行后，相继发生：

preci 任务执行

ci 任务执行

postci 任务执行

痛点及解决之道

显然，使用 npm scripts 也存在着一些问题： JSON 规范并不支持注释，因此无法在 package.json 中添加注释。不过有一些办法可以突破这个限制：

编写小巧、命名良好、单一目的的脚本

分离文档与脚本（比如说放在README.md中）

调用单独的.js文件

分享给小伙伴们：

本文标签： npm，scripts/">npm，scripts

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻