跑 Npm Scripts,其实有更香的方式

开发 开发工具
每个项目都有 npm scripts,大多数人只是用它们而不会调试它们,所以就算每天用也不知道这些工具的原理。这些命令行工具都是在 package.json 中声明一个 bin 字段,然后 install 之后就会放到 node_modules/.bin 下。可以 node node_modules/.bin/xx 来跑,可以 npx xx 来跑,最常用的还是 npm scripts,通过 n

每个前端项目都有 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 之余,还可以理一下它的实现逻辑,哪里感兴趣断在哪里,这不比直接跑香么?

责任编辑:武晓燕 来源: 神光的编程秘籍
相关推荐

2012-10-25 14:14:14

云计算架构师峰会

2020-12-02 18:57:00

Wi-FiMiMo无线

2015-04-10 13:27:44

微软Azure莱森米

2019-10-09 09:42:39

MySQL陷阱数据库

2021-04-15 06:02:50

CSS 三角形技巧

2022-05-27 15:41:22

微软腾讯

2017-03-31 01:37:01

FreeWheel运维

2022-02-23 20:42:40

HTMLmarkdownturndown

2022-11-17 15:05:12

学术

2021-08-02 13:05:49

浏览器HTTP前端

2011-07-19 15:44:18

Xcode 卸载

2018-12-21 09:02:35

5G芯片供应商

2020-09-27 08:33:40

微信QQ传文件

2020-04-07 19:16:31

微信隐藏功能移动应用

2010-03-25 19:01:43

ngnix配置文件

2009-09-22 13:25:54

Hibernate M

2019-01-04 12:46:03

程序员技能沟通

2020-10-25 15:24:04

数据分析打工技术

2021-08-18 10:43:57

微信安全功能

2016-12-02 15:23:42

锐捷互联网技术核心交换机
点赞
收藏

51CTO技术栈公众号