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

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

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

背景

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

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

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

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

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

他們的依賴關係:

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

建立項目

先新建一個文件夾，而後初始化git

# 初始化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命令：

$ npx lerna create XXX 
複製代碼

依賴管理

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

1. package依賴: 也就是某個具體package的依賴，安裝方式有兩種 使用yarn，參照 yarn-workspace

# yarn workspace www add react
$ yarn workspace <workspace_name> <command>
複製代碼

使用lerna，具體用法參照 lerna add

# npx lerna add react --scope www 
$ lerna add <package>[@version] [--dev] [--exact]
複製代碼

2. workspace依賴: mono repo項目內依賴互相引用

# npx lerna add component-a --scope www 
$ lerna add <package>[@version] [--dev] [--exact]
複製代碼

3. 共用的工具依賴: 好比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 

複製代碼