兖州住房与城乡建设局网站,给网站人做网站,合肥建站公司有哪家招聘的,平面网页设计规范大家好#xff0c;我是若川。这是 源码共读 第三期活动#xff0c;纪年小姐姐的第三次投稿。纪年小姐姐学习完优化了自己的项目发布流程#xff0c;而且回答了leader对她的提问#xff0c;来看看她的思考和实践。第三期是 Vue 3.2 发布了#xff0c;那尤雨溪是怎么发布 Vu… 大家好我是若川。这是 源码共读 第三期活动纪年小姐姐的第三次投稿。纪年小姐姐学习完优化了自己的项目发布流程而且回答了leader对她的提问来看看她的思考和实践。第三期是 Vue 3.2 发布了那尤雨溪是怎么发布 Vue.js 的。不知不觉源码共读已经进行了快一个月有些小伙伴表示对面试和工作很有帮助学完立马能用。如果你也感兴趣可以加我微信 ruochuan12参加。1. 学习目标和资源准备这一期阅读的是 Vue3 源码中的 script/release.js 代码也就是 Vue.js 的发布流程。在上一期源码阅读中从 .github/contributing.md[1] 了解到 Vue.js 采用的是 monorepo 的方式进行代码的管理。monorepo 是管理项目代码的一个方式指在一个项目仓库 (repo) 中管理多个模块/包 (package)不同于常见的每个 package 都建一个 repo。刚好我最近搭建组件库也是使用 monorepo 的方式去管理包。monorepo 有个缺点因为每个包都维护着自己的 dependencies那么在 install 的时候会导致 node_modules 的体积非常大。目前最常见的 monorepo 解决方案是使用 lerna 和 yarn 的 workspaces 特性去处理仓库的依赖我搭建的组件库也是使用了 lerna 和 yarn。但 Vue3 的包管理没有使用 lerna它是怎么管理依赖包的版本号呢让我们跟着源码一探究竟。Lerna[2] 是一个管理工具用于管理包含多个软件包package的 JavaScript 项目针对使用 git 和 npm 管理多软件包代码仓库的工作流程进行优化。学习目标1学习 release.js 源码输出记录文档。资源准备Vue3 源码地址https://github.com/vuejs/vue-next2. Yarn Workspace// vue-next/package.json 多余的代码已省略
{private: true,version: 3.2.2,workspaces: [packages/*],scripts: {release: node scripts/release.js}
}
Yarn 从 1.0 版开始支持 Workspace 工作区Workspace 可以更好的统一管理有多个项目的仓库。管理依赖关系便捷每个项目使用独立的 package.json 管理依赖可以使用 yarn 命令一次性安装或者升级所有依赖无需在每个目录下分别安装依赖降低磁盘空间占用可以使多个项目共享同一个 node_modules 目录3. release.js 文件解读先手动跑一遍 yarn run release --dry控制台会输出以下信息多余信息已省略从控制台日志看出来发布 Vue.js 会经历以下几个步骤// 确认发布版本号
? Select release type ...patch (3.2.3)minor (3.3.0)major (4.0.0)custom
// 执行测试用例
Running tests...
// 更新依赖版本
Updating cross dependencies...
// 打包编译所有包
Building all packages...
// 生成 changelog
conventional-changelog -p angular -i CHANGELOG.md -s
// 提交代码
Committing changes...
// 发布包
Publishing packages...
// 推送代码到 GitHub
Pushing to GitHub...
初步了解发布流程后来看看 release.js 源码做了什么先看入口函数 main()main 函数代码太多就不贴代码了记录一下思路和思考确认要发布的版本如果从命令行获取到了版本号先验证版本号规范再次确认版本号如果命令行没有输入版本号会让用户选择一个版本发布确认版本号使用了一个库叫 semver它的作用是用于版本校验比较。// 目的是获取命令行参数也就是允许用户自定义输入版本号比如 yarn release v3.5.0
const args require(minimist)(process.argv.slice(2))
let targetVersion args._[0]
执行测试用例const execa require(execa)
const run (bin, args, opts {}) execa(bin, args, { stdio: inherit, ...opts })
const bin name path.resolve(__dirname, ../node_modules/.bin/ name)if (!skipTests !isDryRun) {// bin(jest) 先获取 node_modules/.bin/jest 的目录run 的本质就是执行命令行// 这行代码的意思就相当于在命令终端项目根目录运行 ./node_modules/.bin/jest 命令。await run(bin(jest), [--clearCache])await run(yarn, [test, --bail])
} else {console.log((skipped))
}
更新依赖版本// 1获取 packages 目录下的所有包
const packages fs.readdirSync(path.resolve(__dirname, ../packages)).filter(p !p.endsWith(.ts) !p.startsWith(.))
// 1获取包的根目录路径
const getPkgRoot pkg path.resolve(__dirname, ../packages/ pkg)
// 2更新根目录和 packages 目录下每个包的 package.json 的版本号
function updateVersions(version) {}
// 3实现更新 package.json 版本号的以及更新依赖包的版本号
function updatePackage(pkgRoot, version) {}
// 4实现更新与 vue 相关依赖包的版本号
function updateDeps(pkg, depType, version) {}
打包编译所有包这部分涉及另外一个文件 script/build.js这个文件主要是将各个包打包在对应的目录下比如打包一个依赖就运行一次yarn build如果有多个包就异步循环调用打包命令。核心代码如下/*** 迭代打包* param {*} maxConcurrency 最大并发* param {*} source 目录* param {*} iteratorFn 构建函数核心就是运行 build 命令* returns*/
async function runParallel(maxConcurrency, source, iteratorFn) {const ret [];const executing [];for (const item of source) {const p Promise.resolve().then(() iteratorFn(item, source));ret.push(p);if (maxConcurrency source.length) {const e p.then(() executing.splice(executing.indexOf(e), 1));executing.push(e);if (executing.length maxConcurrency) {await Promise.race(executing);}}}return Promise.all(ret);
}
生成 CHANGELOG 文件主要运行的是这行命令conventional-changelog -p angular -i CHANGELOG.md -s提交代码先执行 git diff 命令检查文件是否有修改如果有执行 git add 和 git commit 命令发布包最后执行的命令是yarn publish发布新版本和打 Tag推送到 GitHub主要运行的命令打 taggit tag ${version}推送 taggit push origin refs/tags/${version}提交代码到远程仓库git push至此release 发布流程已经分析完了。release 发布流程4. 感想回答一下开篇的问题Vue 是如何管理版本号呢阅读完源码我们会分现在发版的时候会统一更新所有包的 package.json 的版本号。对比我在搭建组件库过程中使用的 lerna其实 lerna 是把 release 这一套流程封装成了一个包它里面处理发包的流程跟 Vue Release 流程基本是一致的。这次的源码解读解答了我的一些疑惑。在我搭建组件库的过程中我一开始了解到的是一个组件一个目录单包推送到 npm 私库。这样做的缺点很明显需要在每个目录安装一遍依赖单独处理版本号。后来了解到了 yarn workspace知道它可以处理依赖安装的问题但版本号的处理还是没有解决方案。于是我去寻找业内比较流行的解决办法发现大部分是使用了 lerna。于是我向我的 TL 沟通询问可否采用 yarn lerna 的方式来搭建组件库。我记得特别清楚他反问我问我 lerna 解决了什么问题我支支吾吾回答了官网上的介绍因为我当时对 lerna 的了解仅停留在官网以及它的常用命令实际上我不知道它解决了什么问题。TL 见我答不上来回复了我一句【如无必要勿增实体】。通过这次的源码阅读我可以回答 TL 反问我的那个问题了lerna 解决的是发包流程中版本号处理自动生成 CHANGELOG 文件提交代码发布包推送到仓库这几个问题它把这几个流程封装成命令供用户使用。它不是搭建组件库非必要引入的工具虽然引用了 lerna 会增加了新的复杂度但在不了解发包流程的前期使用 lerna 可以使组件库开发者更专注于组件开发的工作上而不需要过度关注如何发包。5. 实践经过一番思考我认为引入 lerna 确实给系统增加了一些复杂度因为它要求开发人员额外学习 lerna 的一些知识和命令增加了学习成本以及系统复杂度。我觉得可以参考 Vue 的 release.js写一个适用于项目的构建发版脚本用来发包降低系统复杂度。逻辑代码基本与 Vue3 的 release.js 和 build.js 一致去掉了一些没必要的代码比如单元测试和一些环境判断。还修改了一下 rollup.config.js 的配置感觉用起来确实比 lerna 好用一些。最终效果如下img参考资料[1].github/contributing.md: https://github.com/vuejs/vue-next/blob/master/.github/contributing.md[2]Lerna: https://www.lernajs.cn/最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。推荐阅读我在阿里招前端该怎么帮你可进面试群我读源码的经历初学者也能看懂的 Vue3 源码中那些实用的基础工具函数老姚浅谈怎么学JavaScript················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时活跃在知乎若川掘金若川。致力于分享前端开发经验愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
