每次启动项目的服务,电脑竟然乖乖的帮我打开了浏览器,100 行源码揭秘!
1. 前言
大家好,我是若川。为了能帮助到更多对源码感兴趣、想学会看源码、提升自己前端技术能力的同学。我倾力最近组织了源码共读活动,已进行近一年,大家一起交流学习,共同进步,很多人都表示收获颇丰。
想学源码,极力推荐之前我写的《学习源码整体架构系列》 包含jQuery
、underscore
、lodash
、vuex
、sentry
、axios
、redux
、koa
、vue-devtools
、vuex4
、koa-compose
、vue 3.2 发布
、vue-this
、create-vue
、玩具vite
等 10 余篇源码文章。
最近组织了源码共读活动,大家一起学习源码。于是搜寻各种值得我们学习,且代码行数不多的源码。
我们经常遇到类似场景:每次启动项目的服务,电脑竟然乖乖的帮我打开了浏览器。当然你也可能没有碰到过,但可能有这样的需求。而源码 300 行左右,核心源码不到 100 行。跟我们工作息息相关,非常值得我们学习。
之前写过据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件?本文原理揭秘,也是跟本文类似原理。
阅读本文,你将学到:
2. 使用
2.1 在 webpack 中使用
告诉 dev-server 在服务器启动后打开浏览器。 将其设置为 true 以打开您的默认浏览器。
webpack.config.js
Usage via the CLI:
To disable:
现在大多数都不是直接用 webpack
配置了。而是使用脚手架。那么接着来看我们熟悉的脚手架中,打开浏览器的功能是怎么使用的。
2.2 在 vue-cli 使用
2.3 在 create-react-app 使用
终端我用的是 window terminal
,推荐我之前的文章:使用 ohmyzsh 打造 windows、ubuntu、mac 系统高效终端命令行工具,用过都说好。
webpack
、vue-cli
和create-react-app
,它们三者都有个特点就是不约而同的使用了open。
引用 open
分别的代码位置是:
接着我们来学习open
原理和源码。
3. 原理
在 npm
之王 @sindresorhus 的 open README文档中,英文描述中写了为什么使用它的几条原因。
为什么推荐使用 open
一句话概括open
原理则是:针对不同的系统,使用Node.js
的子进程 child_process
模块的spawn
方法,调用系统的命令打开浏览器。
对应的系统命令简单形式则是:
open
包描述信息:open
我们熟悉的很多 npm
包都依赖了open
。这里列举几个。
4. 阅读源码前的准备工作
4.1 写个例子,便于调试源码
由于测试用例相对较为复杂,我们自己动手写个简单的例子,便于我们自己调试。
根据 README
,我们在 open-analysis
文件夹下新建一个文件夹 examples
,里面存放一个 index.js
。文件内容如下:
在 await open('https://lxchuan12.gitee.io');
打上断点。在终端命令行中执行
会自动唤起调试模式。如果不支持先阅读这个官方文档配置:Node.js debugging in VS Code,如果还是不行,可以升级到最新版VSCode
试试。
跟着调试我们可以进入 open
函数。
4.2 open 打开函数
跟着断点,我们来看最终调用的 baseOpen
。这个函数比较长,重点可以猜到是:const subprocess = childProcess.spawn(command, cliArguments, childProcessOptions);
这句,我们可以打算断点调试。
4.3 baseOpen 基础打开函数
由此我们可以看出:
一句话概括open
原理则是:针对不同的系统,使用Node.js
的子进程 child_process
模块的spawn
方法,调用系统的命令打开浏览器。
对应的系统命令简单形式则是:
5. 总结
一句话概括open
原理则是:针对不同的系统,使用Node.js
的子进程 child_process
模块的spawn
方法,调用系统的命令打开浏览器。
本文从日常常见的场景每次启动服务就能自动打开浏览器出发,先讲述了日常在webpack
、vue-cli
、create-react-app
如何使用该功能,最后从源码层面解读了open的原理和源码实现。工作常用的知识能做到知其然,知其所以然,就比很多人厉害了。
因为文章不宜过长,所以未全面展开讲述源码中所有细节。非常建议读者朋友按照文中方法使用VSCode
调试 open
源码。学会调试源码后,源码并没有想象中的那么难。
最后可以持续关注我 @若川。欢迎与我交流,参与 源码共读 活动,每周大家一起学习 200 行左右的源码,共同进步。
版权声明: 本文为 InfoQ 作者【若川】的原创文章。
原文链接:【http://xie.infoq.cn/article/224679d1c0663df1c32e33991】。文章转载请联系作者。
评论