实例详解带参数的 npm script


Posted in Javascript onMay 28, 2019

添加参数可以减少重复的 npm script。拿 eslint 来说,传入 --fix 参数,就开启内置的代码风格自动修复模式,好智能听起来。

"scripts": {
  ...,
  "lint:js": "eslint ./src/**/*.js",
  "lint:js:fix": "eslint ./src/**/*.js --fix"
}

本着不 DRY 的原则,而且还会遇上复制粘贴带来的风险,可以这么巧妙的配置:

"scripts": {
  ...,
  "lint:js": "eslint ./src/**/*.js",
  "lint:js:fix": "npm run lint:js -- --fix"
}

对面个上面命令配置, --fix 前面添加了 -- , -- 是分隔符,意思就是给 npm run lint:js 添加额外的参数。

这个时候看看你的代码,你会发现一些代码风格就自动修复了。

添加注释

随着命令配置越来越多,添加注释势在必行,以保障代码的可读性和维护性。

在 package.json 中添加 // 为键的值

"scripts": {
  ...,
  "//": "并行检查所有代码编程风格",
  "lint:bx-all": "npm-run-all --parallel lint:*"
}

添加 // 的方式明显有不足,npm run 不能将注释和命令对应上,且只会列出最后那个。

直接在脚本命令中编辑加注释

"scripts": {
  ...,
  "lint-bx-all": "# 并行检查所有代码编程风格 \n npm-run-all --parallel lint:*"
}

注意 \n 后面有空格,主要是为了排版(换行或缩进)美观,当然了也可以用 \t 。

运行时日志

默认日志

不添加任何参数控制日志输出,也是最常用的,可以看到执行命令和执行命令的结果。

更简洁的日志 -s

搭配 --loglevel silent 或 --silent 或 -s 参数来控制日志输出,

不简洁的日志 -d

使用场景多在排查脚本问题的时候可用,搭配 --loglevel verbose 或 --verbose 或 -d (本来以为是 -v ,估计是 -v 是 version)

总结

以上所述是小编给大家介绍的带参数的 npm script,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
Vue2.x通用条件搜索组件的封装及应用详解
May 28 #Javascript
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
vue实现条件叠加搜索的解决方法
May 28 #Javascript
webpack4 从零学习常用配置(小结)
May 28 #Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 #Javascript
jQuery实现高级检索功能
May 28 #jQuery
You might like
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python实现Zabbix-API监控
2018/09/17 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
审计工作个人的自我评价
2013/12/25 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
经理聘任证明
2015/03/02 职场文书
员工辞退通知书
2015/04/17 职场文书
独生子女证明范本
2015/06/19 职场文书
2015年店长个人工作总结
2015/10/23 职场文书