thumb-1920-1107572.PNG
最近开发和写文章都用到了 vuePress 和 SSR, 在深入学习的同时写点文章记录一下
一, 最简起步
首先按照 VuePress 的指导创建一个最小的网站:
- mkdir vuepress-ssr
- cd vuepress-ssr
- yarn init -y
- yarn add -D vuepress
- mkdir docs
- echo '# Hello VuePress'> docs/README.md
接着打开 packjge.JSON 并添加本地调试 & 打包的命令:
- "scripts": {
- "docs:dev": "npx --node-arg=--inspect vuepress dev --debug docs",
- "docs:build": "npx --node-arg=--inspect vuepress build --debug docs"
- }
ok 这样最简单的准备就搞定了, 不过我们暂时不急着调试, 可以先来看看代码.
二, CLI 外壳 - vuepress
我们打开刚刚创建的项目的 node_modules, 找到 vuepress 文件夹:
image-20210114185426058
看到主逻辑文件只有 cli.JS 和 index.JS 两个, 再看看 package.JSON:
image-20210114185924797
可知我们平常使用的 vuepress 调用的其实就是 cli.JS 文件. 再来看看 cli.JS 干了什么:
image-20210114200503449
这里的 cli 其实是 NPM 包 CAC (命令行工具)返回的操作实例, 这里用到 command,option,action 三个方法, 执行逻辑在 action 中
暂时忽略命令行相关的预处理和后续处理操作, 这里的重点关注 registerCoreCommands 这个方法, 上面脚本中的 vuepress dev docs 和 vuepress build docs 的逻辑就在这里的 action 中:
image-20210114201402659
第 38 行开始就将运行方法作为参数放入 wrapcommand 准备执行, dev,build 都来自 node_modules/@vuepress 的 core 文件夹:
image-20210114201607617
也就是说 node_modules/vuepress 其实只是个 CLI 壳子, 而真正的 dev,build,eject 逻辑都在 node_modules/@vuepress 中!
接下来我们继续探究 @vuepress 内部的逻辑
三,@vuepress 探究
现在通过 node_modules/@vuepress 的代码来进一步了解:
image-20210114211314418
进入 @vuepress/core 的 index.JS:
image-20210114211430226
在这里能看到对 dev 和 build 的预处理相同, 都是通过 createApp() 创建一个 App, 然后对 App 进行 process 处理, 但是之后 dev 和 build 就开始进入不同逻辑了.
3.1 createApp
createApp 就在 index.JS 中, 内部返回了 new App(options) 的结果, App 类的构造器如下, 主要负责环境判断和解析目录参数:
image-20210114212219741
当然 App 类携带了很多很多的方法, 主最要的 process,dev,build 当然是都包括在内的.
3.2 process
process 则包含比较多功能, 经过一番阅读后将每个阶段做的事情描述如下:
截屏 2021-01-14_下午 11_22_44
现在浏览器打开 Chrome://inspect/#devices, 然后运行 yarn docs:dev (直接运行 npx --node-arg=--inspect vuepress dev --debug docs 也行), 当 Remote Target 出现 Target 时 inspect 进到控制台:
image-20210114224725966
进去之后应该什么都看不到, 不慌, 回刚刚代码的 process 函数里加上一行 debugger, 然后重新运行 yarn docs:dev, 现在回到调控制台就可以按照自己的需要调试了:
image-20210114224939498
当执行完 118 行的 await this.resolvePages() 之后就可以看到 pages 添加了一个 Page, 也就是我们最简网站的 README 文件中包含的 Hello VuePress.
image-20210114225759622
整个 process 函数走完之后, 可以看到在 @vuepress/core 文件夹下生成了临时文件夹 .temp:
image-20210114230232109
process 函数将项目资源 & 配置进行解析, 然后通过加载 & 运行插件, 最终生成了临时文件. vuepress dev docs 和 vuepress build docs 共享的逻辑就到此为止了.
接下来 vuepress dev docs 会通过引入 webpackDevServer 来启动一个服务器, vuepress build docs 会根据 client & server 的不同配置执行 Webpack 打包, 最后还会做静态 html 渲染, 这些内容会放在下一篇文章中, 敬请期待ヽ (°▽°) ノ
来源: http://www.jianshu.com/p/bd2ccacda326