Monorepo——大型前端项目代码管理方式

两种项目组织方式

• Multirepo(Multiple Repository)：每一个包对应一个项目
• Monorepo(Monolithic Repository)：一个项目仓库中管理多个模块/包

像Babel、create-react-app、react-router等都在使用这种方式，主要目录都早packages目录中、分多个package进行管理：

image-20210407141542143.png

• 优点

  只需要搭建一套脚手架，就能管理（构建、测试、发布）多个package

• 缺陷

  repo体积较大，各个package都是独立的，需要维护各自的dependencies，可能会存在相同依赖，会出现重复安装

StoryBook

StoryBook是一个开源工具，用于独立开发React、Vue和Angular的UI组件。它能有组织和高效地构建UI组件。

• 优点

  • 可视化组件展示平台
  • 在隔离的开发环境中，以交互式的方式展示组件
  • 独立开发组件
  • 适用于React、vue、Angualar等

• 安装

  npm i -g storybook # 全局安装StoryBook
  
  mkdir lgelement # 创建空项目
  
  npx -p @storybook/cli sb init --type vue
  yarn add vue
  yarn add vue-loader vue-template-compiler --dev
  

  安装完成，yarn storybook即可浏览

• 打包，使用yarn build-storybook打包为静态文件

• 使用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自动创建，省去手动创建的过程

  安装plop npm i plop

  创建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命令输入添加的组件名称就可以帮助我们自动创建

• 运行项目，打开浏览器，此时可以看到已经添加的组件

  image-20210408084948449.png

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

yarn workspaces

Workspace 能更好的统一管理有多个项目的仓库，既可在每个项目下使用独立的 package.json 管理依赖，又可便利的享受一条 yarn 命令安装或者升级所有依赖等。更重要的是可以使多个项目共享同一个 node_modules 目录，提升开发效率和降低磁盘空间占用。

• 项目依赖

  image-20210409082539273.png

如果没有yarn workspaces，需要分别在每个目录下执行yarn install安装各自依赖，产生如下问题：

1. 相同依赖会多次下载，耗时且占用控件
2. 没有统一入口进行全部项目的构建

• 开启yarn工作区

  项目根目录的package.json

  "private": true,
  "workspaces":[
      "packages/*" // 工作区子目录
  ]
  

• 使用

  给工作区根目录安装开发依赖

  yarn add jest -D -W

  给指定工作区安装依赖

  yarn workspacee wang-button add lodash@4

  给所有工作区安装依赖‘

  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统一安装，此时可以看到，form和button中的相同的ladash已经被安装到项目根目录下的node_modules中，而input中不相同的依赖则安装到当前的项目node_modeuls中

  image-20210409083809728.png

Lerna介绍

Lerna 是一个优化使用 git 和 npm 管理多包存储库的工作流工具，用于管理具有多个包的 JavaScript 项目，可以一键把代码提交到git和npm仓库

• Lerna使用

  全局安装 yarn global add lerna

  初始化 lerna init

  初始化完成会在项目根目录创建lerna.json文件

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

  同时在package.json中添加lerna的开发依赖

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

• 发布，同时发布到github和npm仓库 lerna publish

  将当前项目提交到git仓库

  查看当前npm登陆状况 npm whoami，执行命令前先切回npm官方仓库

  执行yarn lerna

image-20210409092913166.png