preface

Recently held in chengdu on September 21, attended the fifth FEDAY, more impressive is the chief architect @ egrets engine Wang Ze sharing framework development of infrastructure building, mentioned in the next generation of egrets engine used to monorepo mode, to manage multiple modules, coordination between various modules depend on the updates.

Just during the National Day period, on October 5, UVU released the completed source code of VUe3.0, and also adopted the monorepo management mode. It seems that MonorePO does have its unique advantages. In addition, I have encountered related pain points in the project before, so I have a deep understanding of this mode. This article discusses how to manage code through the Monorepo pattern based on Vue3.0.

What is monorepo?

Monorepo is a code management pattern that puts multiple packages in a single REPO, rather than the traditional pattern of multiple packages and multiple repOs. Babel, React, Angular, Ember, Meteor, Jest, and many other open source projects use this mode to manage code.

Problem solved

  1. multiplerepoDifficult to manage, the editor needs to open multiple projects;
  2. When a module is upgraded, other modules that depend on the upgraded module need to be upgraded manually, which is easy to be neglected.
  3. Common NPM packages are repeatedly installed and take up a lot of disk capacity, such as packaging toolswebpackIt will be installed once per project;
  4. Friendly to newcomers, one command can complete the dependent installation of all modules, and the whole project module does not need to find each warehouse;

Problems brought about

  1. allpackageThe code is concentrated in a project, and the volume of a single project is large.
  2. allpackageCode visible to all, can not do permission management;

How do I implement Monorepo?

The best practice in the industry is to use YARN Workspace + lerNA.

Yarn Workspace can realize the dependency addition and sharing of multiple modules in a project, while LerNA has more perfect functions. It can not only manage multiple modules, but also clear module node_modules, publish modules to NPM, and automatically update inter-module version dependencies. And support full release and according to the change of separate release and other functions.

Yarn is recommended to handle dependency installation and lerNA to handle dependency update and release.

Now we start to build a fake VUe3.0 project based on monorepo mode

1. Install YARN and lerNA globally

$ npm i -g yarn lerna
Copy the code

2. Initialize the project

$ mkdir vue-next && cd vue-next 
$ lerna init

// Project structure
vue-next
|-packages
|-lerna.json
|-package.json
Copy the code

3. Add the Yarn Workspace configuration

// vue-next/package.json
"private": true.// Private in the project root must be set to true, otherwise workspace will not be enabled
"workspaces": [  // Specify the module to manage
    "packages/*"].Copy the code

4. Add the module content

/ / at this point the project structure vue - next | - packages / / packages under all package structure similar to, Just below shows the directory structure of a compiler - the core package | - compiler - core / / has nothing to do with the platform compiler | - __tests__ | - SRC / / / / test cases source file | - index. Js / / root file | - package. Json / / package configuration | - compiler - dom / / browser related compiler responsive system | | - reactivity / / data - the runtime - core / / has nothing to do with the platform of the runtime | - runtime - dom / / Associated with the browser runtime | - runtime - test / / in order to test the lightweight runtime | - server - the renderer / / server rendering | | - Shared / / internal help method - the template - explorer / / Preview the template into the render function tools | - vue / / used to construct the complete version vue | - lerna. Json | - package. JsonCopy the code

5. Install dependencies

Generally, only the following three installation methods are used in a project

5.1 Installing dependencies for the root project (typically common development tools)
// yarn If the NPM package is installed in workspace mode, the -w parameter must be added
$ yarn add -W -D rollup typescript jest prettier ...
Copy the code
5.2 Installing the external NPM package for Package
// @vue/compiler-core is the name of vue-next/packages/compiler-core/package.json
$ yarn workspace @vue/compiler-core add acorn estree-walker source-map 
$ yarn workspace @vue/template-explorer add monaco-editor 
Copy the code
5.3 Installing the internal NPM package for package
// @vue/compiler-core is the name of vue-next/packages/compiler-core/package.json
$ yarn workspace @vue/compiler-dom add @vue/compiler-core@3.0. 0-alpha1.  // Make sure you specify the correct version number, otherwise you will find the package in NPM
$ yarn workspace @vue/runtime-core add @vue/reactivity@3.0. 0-alpha1. 
$ yarn workspace @vue/runtime-dom add @vue/runtime-core@3.0. 0-alpha1. 
$ yarn workspace @vue/runtime-test add @vue/runtime-core@3.0. 0-alpha1. 
$ yarn workspace vue add @vue/compiler-dom@3.0. 0-alpha1. @vue/runtime-dom@3.0. 0-alpha1. // Can be installed at the same time
Copy the code

So far, the basic construction of the project has been completed (packaging and other engineering content are skipped, this article mainly introduces monorepo), it seems that YARN is mainly working, lerna is not in use, here is where LerNA can enable VUe3.0.

Lerna introduction

A tool for managing JavaScript projects with multiple packages.

A tool for managing multiple packages in a JS project.

The main purpose is to make it easier and more efficient for developers to manage the package itself, dependencies, and releases.

1. Initialize the project

// Generate the basic project structure and lerNA configuration
$ lerna init    
Copy the code

2. Install dependencies

If you need to reinstall dependencies, remember to commit git before removing node_modules from the project root path, because monorepo mode implements internal package references as soft links. Deleting the entire node_modules will delete all of the package files and be difficult to recover!

You are advised not to delete the entire node_modules. You can select all node_modules and deselect the internal package soft link before deleting it.

// Install dependencies for all packages, generating node_modules in the directories for and soft links for the internal package in node_modules
$ lerna bootstrap
// NPM installation is used by default, but this project uses YARN. Yarn can be specified
$ lerna bootstrap --npm-client=yarn     Json {"npmClient": "yarn"}
// If the same NPM package is installed between different packages in the above installation mode, it will cause repeated installation and increase the installation time and project volume
// You can use node_modules look-up to install all dependencies into node_modules at the root of your project
$ lerna bootstrap --hosit
Lerna bootstrap --npm-client=yarn --hoist
Hoist not supported with --npm-client=yarn, use yarn workspaces instead
------------------------------------------------
$ yarn // Recommend!! Replace Lerna Bootstrap with the Yarn Workspace feature
Copy the code

3. Clear the redundant node_modules in Pacakge

// When installing dependencies in 6.2, some NPM packages install node_modules to the current package directory
// Node_modules in the root path also installs the project
$ lerna clean
Copy the code

4. View all pacakge

// package.json packages with "private": true are not displayed
$ lerna ls
Copy the code

5. View the pacakge with changes

// package.json packages with "private": true are not displayed
// Under Independent Mode, only modified packages will be released
Vue3.0 uses Fixed/Locked mode (default), and releases all packages each time. The package version follows the project version
$ lerna changed
Copy the code

6. Push to Git and publish to NPM (important)

// Release the whole package according to the current LERna mode (Fixed/Locked Mode (default) or Independent mode) or release the changed package separately
// Each release automatically updates the version number of the relevant package and updates other package dependencies that reference the package
$ lerna publish     
Copy the code

Monorepo demo link

conclusion

This article introduces the implementation of monorepo management mode, through the combination of YARN Workspace and LERNA, to achieve the purpose of efficient and convenient management of multiple packages in a REPO.

We may not have the need to develop egret engines, vUE and other large frameworks in our daily work, but that doesn’t mean we can’t use the pattern. Here are a few scenarios where the Monorepo management pattern works:

  1. A large framework, supported by multiple independent underlying modules developed by itself;
  2. Background project, technology stack unified multiple background systems, each system as independentpackageDeveloping separately, optimizing development and packaging time while sharing components and JS methods can be done as onepackage;
  3. UI component library, each component is independently loaded on demand, such as Ele. me mobile component library mint-UI;
  4. SDK, unified management of codes of different channels accessing the same SDK;
  5. .

The resources

Vue 3 source code introduction Based on Lerna and YARN Workspace monorepo workflow