NPM Scripts

于嘉许
2023-12-01

这是一个简易的关于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>
复制代码
  • 启动服务 npm run client

npm script 实现构建流水线

在现代前端项目的交付工作流中,部署前最关键的环节就是构建,构建环节要完成的事情通常包括:

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

一些常用的库:

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

相关阅读

相关文章

相关问答