实例详解带参数的 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 跨域访问解决方案
Feb 14 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
JavaScript实现拖拽效果
Mar 16 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查询搜索引擎排名位置的代码
2010/01/05 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
python文件特定行插入和替换实例详解
2017/07/12 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
Python any()函数的使用方法
2019/10/28 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
土木工程专业自荐信
2013/10/04 职场文书
大专计算机个人求职的自我评价
2013/10/21 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
单身申明具结书
2015/02/26 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python