NPM Scripts-CSDN博客

这是一个简易的关于npm scripts的小教程

`什么是npmscripts?`

npm scripts就是package.json文件里面，使用scripts字段定义的各种命令

 {
    "scripts": {
        "build": "node build.js"
    }
 }  
复制代码

scripts对象可以有很多个属性，每个属性，对应一段脚本命令。上面的代码等同于：

 $ npm run build // => node build.js
复制代码

`npm scripts的原理`

npm scripts的底层其实是shell在运行脚本，凡是shell能运行的命令，都可以写在npm scripts里面

`修改项目配置项`

通过npm init 或者 npm init -f创建一个package.json项目配置文件

通过 npm config set init 修改默认项目的配置项

npm config set init.author.name "qiuliming"
npm config set init.author.url "https://github.com/AaronHale"
npm config set init.author.email "AaronHale@gmial.com"
复制代码

`通配符`

npmscripts可以使用shell脚本的通配符*

"lint": "eslint *.js"    //*任意文件
"lint": "eslint **/*.js" //**任意目录

复制代码

`脚本运行传递参数使用--`

"lint": "eslint *.js"

$ npm run lint -- --fix
复制代码

`添加运行注释`

可以在package.json 中添加已 // 为键的注释：

"//": "eslint检查"
"eslint": "eslint *.js"
复制代码

或者在命令前面加注释

"eslint": "#eslint检查 \n  eslint *.js"  
复制代码

`npmscript运行时日志输出`

默认日志，不用加任何参数
没有消息就是最好的消息 --loglevel silent，或者 --silent 更简单的-s
尽可能多的显示更多的日志 --loglevel verbose，或者 --verbose，或者更简单的 -d

`钩子`

pre
post

关于钩子这一块，在某些操作前需要做检查、某些操作后需要做清理的情况下非常有用。具体的使用场景，大家可以自行百度，这里就不做详细展开了

`使用变量`

预定义变量

通多npm run env 可以获取到所有变量列表：

npm_package_author_email=AaronHale@gmail.com
npm_package_author_name=AaronHale
npm_package_author_url=http://github.com/AaronHale
.....
.....
复制代码

变量的使用方法遵循 shell 里面的语法，直接在 npm script 给想要引用的变量前面加上 $ 符号即可

{
  "dummy": "echo $npm_package_name"
}
复制代码

自定义变量

除了预定义变量外，我们还可以在 package.json 中添加自定义变量，并且在 npm script 中使用这些变量。

"port": {
    "env": "7890",
    "prod": "80"
}
复制代码

`命令自动补全`

npm completion 集成到shell
zsh-better-npm-completion插件

npm 自身提供了自动完成工具 completion，将其集成到 bash 或者 zsh 里也非常容易官方文档里面的集成方法如下：

npm completion >> ~/.bashrc
npm completion >> ~/.zshrc
复制代码

`跨平台兼容`

文件系统操作的跨平台兼容
- rimraf 或 del-cli，用来删除文件和目录，实现类似于 rm -rf 的功能；
- cpr，用于拷贝、复制文件和目录，实现类似于 cp -r 的功能；
- make-dir-cli，用于创建目录，实现类似于 mkdir -p 的功能；
用 cross-var 引用变量
- 安装cross-var为开发依赖
- 改写引用变量 npm script，根据cross-var规范
用 cross-env 设置环境变量
- 添加 cross-env 到开发依赖
- 改写使用了环境变量的 npm script

`npm script 拆到单独文件中`

借助 scripty 我们可以将 npm script 剥离到单独的文件中，从而把复杂性隔到单独的模块里面，让代码整体看起来更加清晰:

将scripty安装为我们开发依赖，准备目录和文件，并做相关配置即可
准备相关文件和目录
修改 scripty 脚本

`文件监听，自动运行npmscripts`

拥抱现代前端工作流的同学都会有代码风格检查、单元测试等环节，这样就很需要在代码变更之后立即得到反馈，如代码改动导致了那个 Case 失败，哪块不符合团队的编码规范等

单元测试自动化添加--watch 参数
代码检查自动化

我们使用的代码检查工具 stylelint、eslint、jsonlint 不全支持 watch 模式，可以借助 onchange 工具包来实现，onchange 可以方便的让我们在文件被修改、添加、删除时运行需要的命令。

`使用 livereload 实现自动刷新`

安装livereload 和 http-server 为项目依赖
添加 npm script

"client": "npm-run-all --parallel client:*",
"client:reload-server": "livereload client/",
"client:static-server": "http-server client/"
复制代码

在页面中嵌入 livereload 脚本

 <body>
   <h2>LiveReload Demo</h2>
  <script>
    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
      ':35729/livereload.js?snipver=1"></' + 'script>')
  </script>
 </body>
复制代码