- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- 实际项目中npm scripts能做什么，如何跑npm scripts
实际项目中npm scripts能做什么，如何跑npm scripts
Admin 2022-10-12 群英技术资讯 805 次浏览
本篇内容介绍了“实际项目中npm scripts能做什么，如何跑npm scripts”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！每个前端项目都有 npm scripts，我们会用 npm scripts 来组织编译、打包、lint 等任务。大家可能经常会跑 npm scripts，但却对这些命令行工具是怎么实现的并不了解。那如果想了解这些工具的实现原理，应该怎么做呢？这就是今天的主题：调试 npm scripts。
这些命令行工具的 package.json 里都会有个 bin 字段，来声明有哪些命令：
npm install 这个包以后，就会放到 node_modules/.bin 目录下：
这样我们就可以通过 node ./node_modules/.bin/xx 来跑不同的工具了。
我们也可以用 npx 来跑，比如 npx xx，它的作用就是执行 node_modules/.bin 下的本地命令，如果没有的话会从 npm 下载然后执行。
当然，最常用的还是放到 npm scripts 里：
这样就直接 npm run xxx 跑就行了。
npm scripts 本质上还是用 node 来跑这些 script 代码，所以调试他们和调试其他 node 代码没啥区别。
也就是可以这样跑：
在 .vscode/launch.json 的调试文件里，选择 node 的 launch program：
用 node 执行 node_modules/.bin 下的文件，传入参数即可：
其实还有更简单的方式，VSCode Debugger 对 npm scripts 调试的场景做了封装，可以直接选择 npm 类型的调试配置：
直接指定运行的命令即可：
比如我们就用这个 create-react-app 创建的 react 项目来尝试下 npm scripts 的调试：
先去 node_modules/.bin 下这个文件里打个断点：
然后点击 debug 启动：
你会发现会执行 scripts 下的 start 模块：
我们再去 start 下打个断点：
代码执行到这里断住：
这个 config 就是 webpack 的配置：
再往下走，会发现启动了一个 server：
我们在 server 启动的回调函数里打个断点，看看浏览器是怎么打开的：
点击 step into 进入这个断点：
然后单步执行，会走到这样的代码：
依次通过 osascript 来启动这些浏览器，启动失败的话，try catch 里直接忽略了：
这些浏览器 hover 上去就可以看到：
释放断点，你就会发现浏览器打开了：
这样，我们不就梳理了一遍 react-scripts start 的流程么？
总结一下就是这样的：
- 根据输入的 start 命令，执行 scripts/start 模块
- 根据配置，创建 webpack 的 Compiler 对象
- 创建 WebpackDevServer
- server 启动之后，启动浏览器打开 url
- 打开 url 的实现就是通过 osascripts 依次尝试那些浏览器
这样调试完一遍，我们就对 npm run start 有了更深入的认识。
而且，调试的方式跑 script 和直接命令行 npm run start 没啥区别。
要说区别，唯一的区别可能就是这个：
默认调试模式下，输出的内容会在 Debug Console 面板显示：
但这个也可以改：
可以切换成 integratedTerminal，那就会输出在 terminal 了：
这样就和平时 npm run start 执行没了任何区别，而且还可以断点调试，它不香么？
我们再来看个例子，比如 vue cli 创建的 vue 项目，在 vue.config.js 里可以改 webpack 配置：
但如果你想知道默认的配置是啥呢？console.log 么？
console.log 打印大对象可不是个好主意，它是这样的：
有的同学说用 JSON.stringify，那个更难看，特别长的一串。
如果你会了调试 npm scripts 呢？
你就可以加一个 npm 类型的调试配置：
然后打个断点，debug 来跑：
啥配置都能看到，这不香么？
我举的例子只是 webpack 的，但其余的 npm scripts，比如 babel、tsc、eslint、vite 等等都是一样的调试方式。
总结
每个项目都有 npm scripts，大多数人只是用它们而不会调试它们，所以就算每天用也不知道这些工具的原理。
这些命令行工具都是在 package.json 中声明一个 bin 字段，然后 install 之后就会放到 node_modules/.bin 下。
可以 node node_modules/.bin/xx 来跑，可以 npx xx 来跑，最常用的还是 npm scripts，通过 npm run xx 来跑。
npm scripts 的调试就是 node 的调试，只不过 VSCode Debugger 做了简化，可以直接创建 npm 类型的调试配置。
把 console 配置为 integratedTerminal 之后，日志会输出到 terminal，和平时直接跑 npm run xx 就没区别了。而且还可以断点看看执行逻辑。
跑 npm scripts 之余，还可以理一下它的实现逻辑，哪里感兴趣断在哪里，这不比直接跑香么？
关于“实际项目中npm scripts能做什么，如何跑npm scripts”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
如何掌握Node express路由的使用，有哪些知识
本篇文章就来给大家介绍一些你不知道的Node express 路由使用技巧，希望对大家有所帮助！
-
React Router中withRouter组件的用处和用法是什么
本文主要介绍了React Router 5.1.0使用useHistory做页面跳转导航的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
-
怎样用JS实现复选框的全选功能？
怎样用JS实现复选框的全选功能？复选框的全选功能便于多选操作，也是比较实用的一个功能，对此这篇文章就给大家分享JS实现复选框的全选的代码，感兴趣的朋友就接着往下看吧。
-
js数组无效值类型如何去除呢，方法有什么
js如何去除数组中的empty undefined空项 目录 去除数组中的empty undefined空项 去掉数组中无效的值,比如null,undefined,empty 方法一 方法二 去除数组中的empty undefined空项 arr.filter(d=>d) 注意,0也会被去掉 去掉数组中无效的值,比如null,undefined,empty 方法一 直接使用filter就能搞定了 var arr=[1,2,null,undefined,9]; arr=arr.filter(Boolean); 结果arr=[1,2,9] 方法二 ...
-
JavaScript正则表达式的用法是什么？
JavaScript正则表达式的用法是什么？在实际的项目中，常常会使用到JavaScript正则表达式，对此这篇文章就给大家来分享一下JavaScript正则表达式的使用，对新手学习JavaScript正则表达式有一定的帮助，需要的朋友可以参考。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
