yarn workspace、lerna介绍

2021-04-12 本文已影响0人翔子丶

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安装各自依赖，产生如下问题：

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

开启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

yarn workspace、lerna介绍

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

StoryBook

yarn workspaces

Lerna介绍

猜你喜欢

热点阅读