Monorepo——大型前端項目代碼管理方式

兩種項目組織方式

• Multirepo(Multiple Repository)：每一個包對應一個項目
• Monorepo(Monolithic Repository)：一個項目倉庫中管理多個模塊/包

像Babel、create-react-app、react-router等都在使用這種方式，主要目錄都早packages目錄中、分多個package進行管理：

image-20210407141542143.png

• 優(yōu)點

  只需要搭建一套腳手架，就能管理（構建、測試、發(fā)布）多個package

• 缺陷

  repo體積較大，各個package都是獨立的，需要維護各自的dependencies，可能會存在相同依賴，會出現重復安裝

StoryBook

StoryBook是一個開源工具，用于獨立開發(fā)React、Vue和Angular的UI組件。它能有組織和高效地構建UI組件。

• 優(yōu)點

  • 可視化組件展示平臺
  • 在隔離的開發(fā)環(huán)境中，以交互式的方式展示組件
  • 獨立開發(fā)組件
  • 適用于React、vue、Angualar等

• 安裝

  npm i -g storybook # 全局安裝StoryBook
  
  mkdir lgelement # 創(chuàng)建空項目
  
  npx -p @storybook/cli sb init --type vue
  yarn add vue
  yarn add vue-loader vue-template-compiler --dev
  

  安裝完成，yarn storybook即可瀏覽

• 打包，使用yarn build-storybook打包為靜態(tài)文件

• 使用packages中的組件，修改.storebook/main.js

  module.exports = {
    stories: [
      '../packages/**/*.stories.js', // 默認是'../stories/**/*.stories.js',修改為packages下的任意目錄
      '../stories/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  }
  

• 在packages中根據storyBook目錄添加input組件

  image-20210408084519181.png

  這里可以使用plop自動創(chuàng)建，省去手動創(chuàng)建的過程

  安裝plop npm i plop

  創(chuàng)建plopfile.js文件

  module.exports = plop => {
    plop.setGenerator('component', {
      description: 'create a custom component',
      prompts: [
        {
          type: 'input',
          name: 'name',
          message: 'component name',
          default: 'MyComponent'
        }
      ],
      actions: [
        {
          type: 'add',
          path: 'packages/{{name}}/src/{{name}}.vue',
          templateFile: 'plop-template/component/src/component.hbs'
        },
        {
          type: 'add',
          path: 'packages/{{name}}/__tests__/{{name}}.test.js',
          templateFile: 'plop-template/component/__tests__/component.test.hbs'
        },
        {
          type: 'add',
          path: 'packages/{{name}}/stories/{{name}}.stories.js',
          templateFile: 'plop-template/component/stories/component.stories.hbs'
        },
        {
          type: 'add',
          path: 'packages/{{name}}/index.js',
          templateFile: 'plop-template/component/index.hbs'
        },
        {
          type: 'add',
          path: 'packages/{{name}}/LICENSE',
          templateFile: 'plop-template/component/LICENSE'
        },
        {
          type: 'add',
          path: 'packages/{{name}}/package.json',
          templateFile: 'plop-template/component/package.hbs'
        },
        {
          type: 'add',
          path: 'packages/{{name}}/README.md',
          templateFile: 'plop-template/component/README.hbs'
        }
      ]
    })
  }
  

  在scripts中配置 "plop": "plop"

  以后使用yarn plop命令輸入添加的組件名稱就可以幫助我們自動創(chuàng)建

• 運行項目，打開瀏覽器，此時可以看到已經添加的組件

  image-20210408084948449.png

• 將寫好的form、formItem、button等依次添加到packages查看

yarn workspaces

Workspace 能更好的統(tǒng)一管理有多個項目的倉庫，既可在每個項目下使用獨立的 package.json 管理依賴，又可便利的享受一條 yarn 命令安裝或者升級所有依賴等。更重要的是可以使多個項目共享同一個 node_modules 目錄，提升開發(fā)效率和降低磁盤空間占用。

• 項目依賴

  image-20210409082539273.png

如果沒有yarn workspaces，需要分別在每個目錄下執(zhí)行yarn install安裝各自依賴，產生如下問題：

1. 相同依賴會多次下載，耗時且占用控件
2. 沒有統(tǒng)一入口進行全部項目的構建

• 開啟yarn工作區(qū)

  項目根目錄的package.json

  "private": true,
  "workspaces":[
      "packages/*" // 工作區(qū)子目錄
  ]
  

• 使用

  給工作區(qū)根目錄安裝開發(fā)依賴

  yarn add jest -D -W

  給指定工作區(qū)安裝依賴

  yarn workspacee wang-button add lodash@4

  給所有工作區(qū)安裝依賴‘

  yarn install

  可以分別給packages中的目錄添加不同項目依賴，wang-form等都是項目package.json中的name

  yarn workspace wang-form add  lodash@4
  yarn workspace wang-input add  lodash@3
  yarn workspace wang-button add  lodash@4
  

  安裝完成后，刪除各自項目下的node-modules，yarn install統(tǒng)一安裝，此時可以看到，form和button中的相同的ladash已經被安裝到項目根目錄下的node_modules中，而input中不相同的依賴則安裝到當前的項目node_modeuls中

  image-20210409083809728.png

Lerna介紹

Lerna 是一個優(yōu)化使用 git 和 npm 管理多包存儲庫的工作流工具，用于管理具有多個包的 JavaScript 項目，可以一鍵把代碼提交到git和npm倉庫

• Lerna使用

  全局安裝 yarn global add lerna

  初始化 lerna init

  初始化完成會在項目根目錄創(chuàng)建lerna.json文件

  {
    "packages": [
      "packages/*"
    ],
    "version": "0.0.0"
  }
  

  同時在package.json中添加lerna的開發(fā)依賴

  "scripts": {
      ...
      "lerna": "lerna publish"
    },
  

• 發(fā)布，同時發(fā)布到github和npm倉庫 lerna publish

  將當前項目提交到git倉庫

  查看當前npm登陸狀況 npm whoami，執(zhí)行命令前先切回npm官方倉庫

  執(zhí)行yarn lerna

image-20210409092913166.png