Implementation of MonOREPO Management Mode in Vue3.0

The 5th Feday in Chengdu was attended on September 21, and the impression was relatively impressed. The Chief Architect of the Egret Engine @ 王泽 Share “Infrastructure construction in framework” mentioned in the next generation of Egret Engine to use Monorepo mode to manage multiple modules to coordinate dependency updates between modules.

Just on October 5th during the National Day, Vue3.0 has been completed, but also using monorepo management model, it seems that monorepo does have its own unique advantage, plus before the project encountered The relevant pain points, so I understand this mode in depth, this article will discuss how to manage the code through MonorePo mode based on Vue3.0.


Monorepo is a code management mode that places multiple packages in a REPO, eliminating the model of multiple Package multiple REPOs.
Many open source projects such as Babel, React, Angular, EMBER, Meteor, Jest use this mode to manage code.

Solved problem

Multiple REPOs are difficult to manage, the editor needs to open multiple items;

a module Upgrade, other modules of redeemed modules require manual upgrade, easy to hurt; Used NPM package repeatedly installed, accounting for a large number of hard disk capacity, such as packaging tools WebPack will be installed in each project;

    For newcomers, one command to complete all modules dependent installation, and the entire project module does not have to be found;
  • Problem
  • All Package code is concentrated in one project, the single project is comparedLarge;
All package codes are visible to everyone, unable to do permission management;

How to implement Monorepo?

  • The best practice in the industry is implemented in Yarn Workspace + LERNA, and Vue3.0 is also implemented in a combination of both.
  • YARN WORKSPACE can implement the dependence and sharing of multiple modules in a project, while the functionality of LERNA is more perfect, not only manages multiple modules, but also clear module Node_Modules, release Modules to NPM, automatically update version dependencies between modules, and support full distribution and issues such as changes to the change.

YARN officially recommends using YARN to deal with dependence, using lerna to deal with redeement and release issues.
The following starts based on the monorepo mode to build an imitation Vue3.0 project

1. Global installation YARN and LERNA

2. Initialization Project

 $ mkdir vue-next && cd Vue-next $ lerna init // This time Items Vue-next | -Packages | -lerna.json | -Package.json   
3. Add Yarn Workspace configuration

: // vue-next / package.json “private”: true,// private project under the root directory must be set to true, otherwise workspace will not be enabled “workspaces”: [// module designated to be managed “packages / *”],
. 4 content adding module

// at this project structure vue-next | packet structure at all similar -packages // packages, just below shows the directory structure of compiler-core package | -compiler-core // platform-independent compiler | -__ tests__ // test | -src // source file | -index.js // root file | -package.json // package configuration | -compiler-dom // browser-related compiler | -reactivity // data response systems | -runtime-core // platform-independent runtime | -runtime-dom // browser-related the runtime | -runtime-test // for lightweight runtime tests | -server-renderer // server-side rendering | -shared // internal helper methods | -template-explorer // preview template converted into tools render function | vue version -vue // used to build complete | -lerna.json |. -package.json
5 related to the installation dependent on

project in general only the following three types of mounting used

to the root item 5.1Installation dependence (generally a public development tool)
 // YARN must be added to -w parameter $ YARN Add -w - Workspace mode Mount NPM package D Rollup TypeScript Jest Prettier ...   5.2 Give package to install external NPM pack 

// @ vue / compiler-core is taken vue-next / packages / compiler-core / package.json name field $ yarn workspace @ vue / compiler-core add acorn estree-walker source-map $ yarn workspace @ vue / template-explorer Add Monaco-editor

5.3 Give package installation internal NPM package

   @ Vue / Compiler -core is a name field of Vue-next / packages / compiler-core / package.json $ YARN WORKSPACE @ Vue / Compiler-Dom Add @ Vue / Compiler-Core @ 3.0.0-alpha.1 / / must specify correct The version number, otherwise the NPM lookup package $ Yarn Workspace @ Vue / Runtime-Core Add @ Vue / Reactivity @ 3.0.0-alpha.1 $ YARN WORKSPACE @ Vue / Runtime-dom add @ vue / runtime-core @ 3.0.0-alpha.1 $ yarn workspace @ vue / runtime-test add @ vue / runtime-core @ 3.0.0-alpha.1 $ yarn workspace vue add @ vue / compiler-dom@3.0.0-alpha.1 @ vue / runtime-dom 3.0.0-alpha.1 // @ can be installed a plurality of 

Having thus completed build a foundation project (packaging and other engineering content skip, paper describes monorepo related), it seems to be mainly yarn no no come in handy at work, lerna, to introduce the following lerna where you can energize vue3.0.

lerna description
A tool for managing JavaScript projects with multiple packages.

for a project management js package of multiple tools.

is mainly for developers to more efficiently and easily manage package itself, dependent, release.
  1. Initialization item  

// to generate a basic program structure and configuration Lerna $ lerna init

2. installation depends

If you need to re-install dependencies, remember to be git delete items before node_modules root path submit saved because monorepo pattern in the form of a soft link to achieve internal package referenced directly delete the entire node_modules at the same time put all package of documentsDelete, it is difficult to recover!

It is recommended to never delete the entire Node_Modules operation, you can enter the Node_Modules and then cancel the internal package soft link and then delete.

// Give all Package installation dependencies, generate node_modules for the directory, and generate soft links for internal packages in Node_Modules to generate soft link $ ler bootstrap // By default, NPM installation However, the present project Yarn used, can specify yarn $ lerna bootstrap –npm-client = yarn // or disposed lerna.json { “npmClient”: “yarn”} // if the attachment is mounted between a different embodiment of the package The same NPM package can cause duplicate installation, increase the installation time and project volume // can use Node_Modules to find the characteristics, which relies on Node_Modules installed to the project root path, Lerna plus – HOSIT can be $ lerna bootstrap – -hosit // use lerna bootstrap –npm-client = yarn –hoist // there will be conflict, error –hoist is not supported with –npm-client = yarn, use yarn workspaces instead ——- —————————————- $ Yarn // Recommended! ! Alternatively yarn workspace with characteristic lerna bootstrap

3. Pacakge remove excess node_modules
// When the installation is dependent on, some npm package will install the Node_Modules // at the current package directory to install Node_Modules in the root path will also install item $ ler Clean

4. View all Pacakge

// package “private”: TRUE Package does not show $ LERNA LS

5. Viewing the changed Pacakge
  // package.json set "Private" in PRIVATE ": True's package does not show // only has changed Package under Independent Mode will be released // vue3.0 use fixed / locked mode (default), each time you release all packages, Package version follow items The version takes off $ ler change  
6. Push to Git and release to NPM (Important)

// According to the current LERNA mode (Fixed / Locked Mode (Default) or Independent Mode, Package is published separately published // each time the release will automatically update the version number of the relevant package, and will update the reference Other Package of this package depende $ lerna public
   MonorEPO Demo link 

This article describes the implementation of MonOREPO management mode in Vue3.0, combined with both Yarn Workspace and LERNA. The purpose of managing multiple packages efficiently and conveniently managing in a REPO.
 In our daily work, there may be no need to develop the needs of the large frame of the Vue, but this does not mean that we can't use this mode. Here I summarize several suitable for Monorepo management models. Scene:   
Large frame, depending on multiple independent underlying modules support;
Backstage project, technology stack uniform multiple background systems, each system as a separate package Separate development, optimize development and packaging time, and shared components and JS methods can be used as a package;

UI component library, independent implementation on-demand, such as hungry mobile component library Mint-ui;


Infrastructure in frame development
VUE 3 source code Monorepo workflow based on LERNA and YARN WORKSPACE
  The above is all of this article, I hope to everyone I have helpful, I hope everyone will support Tumi Clouds.  
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment