0 Previous live review

Last time I put together all the content of the “Vue DevUI Open Source Guide” series 1-6, and gave birth to the Mini-Vue-Devui project. Mini-vue-devui is a mini-version of the component library product, which currently includes:

  1. vite+vue3+ts+jsx+sassFoundation engineering of
  2. Based on thevitepress+vitepress-theme-demoblockDocument system
  3. jest+@vue/test-utilsUnit test environment
  4. A usejsxThe first version of the Tree component
  5. A).devui-cliThe scaffold

At the end of the live broadcast, we quickly went through the process of setting up the unit test environment, but we didn’t teach them by hand. Instead, we left an assignment, which was submitted by QbjGKNick first.

Last live article:

  1. Build a VUE3 component library from 0 to 1: Mini-vue-devui
  2. Add unit tests to the Vue Devui component library project

But is that all there is to a component library?

This is just the tip of the iceberg.

In this installment, we’ll continue the live stream, refining the Mini-Vue-Devui project, adding support for Monorepo, and getting through the process of building component libraries on demand.

1. Why do WE need to do Monorepo transformation

1.1 to start the mini – vue – devui

Clone code # warehouse to local git clone https://github.com/57code/mini-vue-devui.git # installation depend on the yarn / / or NPM I # local boot yarn docs: / dev/or npm run docs:devCopy the code

The effect is as follows:

1.2 lerna profile

This diagram on lerna’s website gives a good idea of what Lerna does:

The whole multi-dragon body represents a single warehouse, each head represents a sub-package, each sub-package is independent (each head has independent consciousness), independent testing, independent start-up, independent construction, independent deployment do not affect each other.

Simply put, Lerna is a tool for managing JavaScript projects with multiple packages.

Let’s see how to use LerNA and transform our mini-vue-devui project into Monorepo form using YARN + LerNA.

Reference:

  1. Lerna official website: lerna.js.org/
  2. Source: github.com/lerna/lerna

1.3 The current directory structure of Mini-vue-devui

Mini-vue - Devui ├─ Devui // Vue Devui Component ├─ Devui -cli // Devui API ├─ Docs // VitePress Document System ├─ Index.html ├─ Jest.config.js ├─ Lib ├─ Node_Modules ├─ Package-Lock. json ├─ Package-.json ├─ Public ├─ SRC ├─ Json ├─ vite. Config. Ts ├─ map.lockCopy the code

You can see:

  1. Devui // Vue Devui component library
  2. Devui -cli // devui cli scaffolding tool
  3. Docs // Vitepress document system

All three of the most critical modules are in the root directory, which is confusing and makes it difficult to extend submodules if you want to do one in the future

  • eslint-config-plugin
  • ordevui-vscode-plugin
  • orvue-devui-admin
  • Or isreact-devui

Where do these submodules go?

If they were all in the root directory, it would be a mess and unmaintainable.

If every one of them were broken down into a code repository, it would exist

  • Code reuse issues
  • Warehouse dependency problem with repeated installation
  • The cost of switching between warehouses

This is where Lerna comes in.

2. How to use LerNA to transform mini-vue-devui into Monorepo mode?

2.1 Installing lerNA globally

npm i lerna -g

Copy the code

2.2 Initializing lerNA Project

Create the mini-vue-devui directory and execute it in the root directory

lerna init
Copy the code

Configure the lerna.json file

{"packages": [" Packages /*"], "version": "0.0.0", "npmClient": "YARN ", // New, use yarn package management tool "useWorkspaces": True // Add, use YARN workspaces}Copy the code

Configuration package. Json

{ "name": "mini-vue-devui", "private": true, "devDependencies": { "lerna": "^4.0.0"}, // Add new packages directory "workspaces": ["packages/*"]}Copy the code

2.3 Adding subpackages

lerna create devui-vue -y
Copy the code

Copy all the files in mini-vue-devui to the Packages /devui-vue directory.

2.4 Installation Dependencies

lerna bootstrap
Copy the code

2.5 Local Boot

lerna exec --scope mini-vue-devui yarn docs:dev
Copy the code

Startup successful!

2.6 build

lerna exec --scope mini-vue-devui yarn docs:build
Copy the code

Build successful!

3 pull away devui – cli

Test the function

Lerna exec --scope mini-vue-devui yarn CLI :build // Run the CLI command to create a component templateCopy the code

Create the Devui-CLI subpackage

lerna create devui-cli -y
Copy the code

Copy all files in packages/devui-vue/devui-cli to the Packages /devui-cli directory.

Retest the feature

Lerna exec --scope mini-vue-devui yarn CLI :build // Run the CLI command to create a component templateCopy the code

Working fine!