NPM Scripts

时间 2019-12-01

标签 npm scripts 繁體版

原文原文链接

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

`什么是npmscripts?`

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

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

scripts对象能够有不少个属性，每一个属性，对应一段脚本命令。上面的代码等同于：node

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

`npm scripts的原理`

npm scripts的底层实际上是shell在运行脚本，凡是shell能运行的命令，均可以写在npm scripts里面git

`修改项目配置项`

经过npm init 或者 npm init -f建立一个package.json项目配置文件github

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

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脚本的通配符*shell

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

复制代码

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

"lint": "eslint *.js"

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

`添加运行注释`

能够在package.json 中添加已 // 为键的注释：npm

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

或者在命令前面加注释json

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

`npmscript运行时日志输出`

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

`钩子`

pre
post

关于钩子这一块，在某些操做前须要作检查、某些操做后须要作清理的状况下很是有用。具体的使用场景，你们能够自行百度，这里就不作详细展开了sass

`使用变量`

预约义变量

通多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>
复制代码

启动服务 npm run client

npm script 实现构建流水线

在现代前端项目的交付工做流中，部署前最关键的环节就是构建，构建环节要完成的事情一般包括：

源代码预编译：好比 less、sass、typescript；
图片优化、雪碧图生成；
JS、CSS 合并、压缩；
静态资源加版本号和引用替换；
静态资源传 CDN 等。

一些经常使用的库：

图片构建： imagemin
css压缩 cssmin
js构建 uglify-js压缩
资源版本号和引用替换
- hashmark
- replaceinfiles

NPM Scripts

什么是npmscripts?

npm scripts的原理

修改项目配置项

通配符

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

添加运行注释

npmscript运行时日志输出

钩子

使用变量

命令自动补全

跨平台兼容

npm script 拆到单独文件中

文件监听，自动运行npmscripts

使用 livereload 实现自动刷新