实例详解带参数的 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 相关文章推荐
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
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写杨辉三角实例代码
2011/07/17 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
webpack优化的深入理解
2018/12/10 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
javascript History对象原理解析
2020/02/17 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python 返回汉字的汉语拼音
2009/02/27 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
如何在django中运行scrapy框架
2020/04/22 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
联强国际笔试题面试题
2013/07/10 面试题
nohup的用法
2012/11/26 面试题
社会调查研究计划书
2014/05/01 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
镇创先争优活动总结
2014/08/28 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
在职证明格式样本
2015/06/15 职场文书
付款证明格式范文
2015/06/19 职场文书