基於lerna+yarn workspaces的monorepo項目實踐

注: 文章內不會說過多的基礎內容,默認你有搭建開發環境的基礎技能。css

我作 re-editor 富文本編輯器 的時候使用了monorepo管理方式,在開發過程當中以爲monorepo也是很適合團隊內部組織項目,下面分享下具體作法與你們共同討論react

背景

團隊內多項目開發常常會遇到如下幾個問題git

  1. 新建項目須要從新配置各類工具,繁瑣,雖然也能夠用腳手架生成,但後期涉及到依賴的升級也麻煩
  2. 項目內的依賴互相引用雖然有yarn/npm link,但仍是影響開發體驗
  3. babel等配置但願能夠多項目共享

爲了解決上述問題,決定在項目內使用 lerna + yarn workspaces。github

咱們使用下面的項目結構模擬團隊內常見的情景,演示項目web

  • 兩個毫無關係的web項目
    • www-a,使用antd
    • www-b,使用react-bootstrap
  • 三個組件項目
    • component-a
    • component-b
    • component-c

他們的依賴關係:npm

  • www-a 依賴 component-a
  • www-b 依賴 component-b
  • component-a 和 component-b 依賴component-c

建立項目

先新建一個文件夾,而後初始化gitjson

# 初始化git
git init 
複製代碼
# 初始化項目
$ npm init -f 
# 安裝lerna,也能夠全局安裝,非全局安裝記得在命令前加上npx
$ yarn add lerna --dev
複製代碼
// 使用workspace需在package.json內增長以下內容
"private": true,
  "workspaces": [
    "packages/*" 
  ],
複製代碼
# 初始化lerna
$ lerna init
複製代碼
// 在lerna.json內增長以下內容以在lerna內啓用yarn workspaces
{
  "npmClient": "yarn"
  "useWorkspaces": true
}
複製代碼

接下來就是建立package了,能夠在packages文件夾內手動建立文件夾,或者使用lerna命令:bootstrap

$ npx lerna create XXX 
複製代碼

依賴管理

開發中基本會遇到三種依賴安裝狀況babel

  1. package依賴: 也就是某個具體package的依賴,安裝方式有兩種 使用yarn,參照 yarn-workspace
# yarn workspace www add react
$ yarn workspace <workspace_name> <command>
複製代碼

使用lerna,具體用法參照 lerna addantd

# npx lerna add react --scope www 
$ lerna add <package>[@version] [--dev] [--exact]
複製代碼
  1. workspace依賴: mono repo項目內依賴互相引用
# npx lerna add component-a --scope www 
$ lerna add <package>[@version] [--dev] [--exact]
複製代碼
  1. 共用的工具依賴: 好比babel,eslint等工具依賴,須要共享配置
# 注意: 必定要在項目根目錄下
yarn add @babel/core @babel/preset-env --dev -W
複製代碼

咱們如今抽取出可複用的內容:

  • 代碼編譯,使用babel
  • css預處理,使用postcss
  • eslint,項目使用一致的語法規範
  • commitlint,項目使用一致的commit提交規範

這些工具按照使用習慣正常安裝就行,重點說下babel。

bable配置文件使用babel.config.js,代碼編譯配置全局共享,而後經過overrides進行差別化配置,好比項目www-a使用antd,能夠單獨配置按需加載

const presets = [
  "@babel/preset-env",
  "@babel/preset-react"
];

const overrides = [
  {
    test: ["packages/www-a"],
    plugins: [
      ["module-resolver", {
        "alias": { "~": "./src/scripts" }
      }],
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }]
    ]
  },
  {
    test: ["packages/www-b"],
    plugins: [
      ["module-resolver", {
        "alias": { "~": "./src/scripts" }
      }]
    ]
  },
]
複製代碼

npm script

使用lerna管理項目, 每一個項目下都寫本身的npm script,好比 start build,而後使用lerna執行,通常將命令寫到根目錄下的npm script,好比:

"scripts": {
   "start:www-a": "lerna run start --parallel --scope www-a --scope component-a --scope component-c"
  },
複製代碼
# 執行全部packages的build命令
$ lerna run build

# 並行執行全部packages的start命令
$ lerna run start --parallel 

複製代碼
相關文章
相關標籤/搜索