溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
前段時間9月21日參加了在成都舉辦的第五屆FEDAY， 印象比較深刻的是白鷺引擎首席架構師@王澤分享的《框架開發中的基礎設施搭建》 ，提到了在下一代白鷺引擎中使用到monorepo模式，以用來管理多個模塊，協調各個模塊之間的依賴更新。
正好在國慶期間10月5日尤大公開了vue3.0已完成的源碼，也是采用了monorepo管理模式，看來monorepo確實有其獨到的優勢，再加上以前在項目中遇到過相關的痛點，所以深入地了解了一下這種模式，本文將基于vue3.0討論如何通過monorepo模式來管理代碼的。
什么是 monorepo？
monorepo是一種將多個package放在一個repo中的代碼管理模式，摒棄了傳統的多個package多個repo的模式。
目前 Babel, React, Angular, Ember, Meteor, Jest等許多開源項目都使用該種模式來管理代碼。
解決的問題
帶來的問題
如何實現 monorepo？
目前業界最佳實踐是采用yarn workspace + lerna 來實現，vue3.0也是采用兩者結合的方式來實現。
yarn workspace可以實現在一個項目中實現多個模塊的依賴新增和共用，而lerna的功能則更完善，不僅可以管理多個模塊，還有清除模塊node_modules，發布模塊到npm，自動更新模塊間版本依賴，并支持全量發布和根據改動單獨發布等功能。
yarn官方推薦用yarn來處理依賴安裝，用lerna來處理依賴更新和發布問題。
下面開始基于monorepo模式來搭建一個仿vue3.0的項目
1. 全局安裝 yarn 和 lerna
$ npm i -g yarn lerna
2. 初始化項目
$ mkdir vue-next && cd vue-next $ lerna init // 此時項目結構 vue-next |-packages |-lerna.json |-package.json
3. 添加yarn workspace配置
// vue-next/package.json "private": true, // 項目根目錄下的private必須設置成true，否則workspace不會被啟用 "workspaces": [ // 指定需要管理的模塊 "packages/*" ],
4. 添加模塊內容
// 此時項目結構
vue-next
|-packages // packages下的所有包結構類似，下面僅展示了compiler-core包的目錄結構
|-compiler-core // 與平臺無關的編譯器
|-__tests__ // 測試用例
|-src // 源文件
|-index.js // 根文件
|-package.json // 包配置
|-compiler-dom // 與瀏覽器相關的編譯器
|-reactivity // 數據響應式系統
|-runtime-core // 與平臺無關的runtime
|-runtime-dom // 與瀏覽器相關的runtime
|-runtime-test // 為了測試的輕量級runtime
|-server-renderer // 服務端渲染
|-shared // 內部幫助方法
|-template-explorer // 預覽模版轉化成render函數的工具
|-vue // 用于構建完整的vue版本
|-lerna.json
|-package.json
5. 安裝相關依賴
項目中一般只會用到以下3種安裝形式
5.1 給根項目安裝依賴（一般是公用的開發工具）
// yarn 使用 workspace 模式安裝 npm 包時必須加 -W 參數 $ yarn add -W -D rollup typescript jest prettier ...
5.2 給package安裝外部npm包
// @vue/compiler-core 是取 vue-next/packages/compiler-core/package.json 的 name 字段 $ yarn workspace @vue/compiler-core add acorn estree-walker source-map $ yarn workspace @vue/template-explorer add monaco-editor
5.3 給package安裝內部npm包
// @vue/compiler-core 是取 vue-next/packages/compiler-core/package.json 的 name 字段 $ yarn workspace @vue/compiler-dom add @vue/compiler-core@3.0.0-alpha.1 // 一定要指定正確的版本號，不然會到npm查找包 $ yarn workspace @vue/runtime-core add @vue/reactivity@3.0.0-alpha.1 $ yarn workspace @vue/runtime-dom add @vue/runtime-core@3.0.0-alpha.1 $ yarn workspace @vue/runtime-test add @vue/runtime-core@3.0.0-alpha.1 $ yarn workspace vue add @vue/compiler-dom@3.0.0-alpha.1 @vue/runtime-dom@3.0.0-alpha.1 // 可同時安裝多個
至此已經完成了項目的基礎搭建（打包等工程化內容略過，本文主要介紹monorepo相關），似乎主要是yarn在工作，lerna沒有沒有派上用場，下面來介紹lerna在哪些地方可以賦能vue3.0。
lerna介紹
A tool for managing JavaScript projects with multiple packages.
一個在js項目中用來管理多個package的工具。
主要是便于開發者更加高效簡便地管理package本身，依賴，發布。
1. 初始化項目
// 生成基本項目結構和 lerna 配置 $ lerna init
2. 安裝依賴
如果需要重新安裝依賴，切記在刪除項目根路徑的node_modules前進行git提交保存，因為monorepo模式是以軟鏈接的形式來實現內部 package 引用的，直接刪除整個node_modules的同時會把所有package的文件刪掉，難以恢復！
建議永不進行刪除整個node_modules的操作，可以進入node_modules全選后再取消勾選內部package軟鏈接再刪除。
// 給所有 package 安裝依賴，在對于的目錄生成 node_modules，并在 node_modules 中為內部package生成軟鏈接
$ lerna bootstrap
// 默認會使用 npm 安裝，但是本項目使用 yarn，可以指定使用 yarn
$ lerna bootstrap --npm-client=yarn // 或者在 lerna.json 配置 {"npmClient": "yarn"}
// 上述安裝方式如果不同package之間安裝了同一個npm包，會造成重復安裝，增加安裝時間和項目體積
// 可以利用 node_modules 向上查找的特性，將所有依賴安裝到項目根路徑的 node_modules 中，lerna 加上 --hosit即可
$ lerna bootstrap --hosit
// 使用lerna bootstrap --npm-client=yarn --hoist
// 會有沖突，報錯--hoist is not supported with --npm-client=yarn, use yarn workspaces instead
------------------------------------------------
$ yarn // 推薦！！ 用 yarn workspace 特性替代 lerna bootstrap
3. 清除pacakge中多余的node_modules
// 在 6.2 安裝依賴時，部分npm包會給當前的package目錄安裝 node_modules // 同時根路徑中的 node_modules 也會安裝項目 $ lerna clean
4. 查看所有pacakge
// package.json 中設置了 "private": true 的 package 不會展示 $ lerna ls
5. 查看有改動的pacakge
// package.json 中設置了 "private": true 的 package 不會展示 // 在 Independent mode 下只有改動過的 package 才會被發布 // vue3.0 采用的是 Fixed/Locked mode (default)，每次都會發布所有 package，package 版本跟隨項目的版本走 $ lerna changed
6. 推送到git和發布到npm（重要）
// 根據當前的 lerna 模式（Fixed/Locked mode (default) 或者 Independent mode）來進行整包發布或者有改動的 package 單獨發布 // 每次發布會自動更新相關package的版本號，并且會更新引用該package的其他package依賴 $ lerna publish
monorepo demo 鏈接
總結
本文介紹了vue3.0中monorepo管理模式的實現，通過yarn workspace和lerna兩者相結合，達到了在一個repo 中高效便捷地管理多個package的目的。
在我們日常工作中可能沒有開發白鷺引擎，vue這類大型框架的需求，但是這不代表我們用不到該模式，下面我總結了幾種適合monorepo管理模式的場景：
參考資料
框架開發中的基礎設施搭建
Vue 3 源碼導讀
基于lerna和yarn workspace的monorepo工作流
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
