Scope of application

It’s not going to be used

Business projects (XXX systems, etc.) : Lerna will not be used. Usually, you only need to put a project in a Git repository with only a package.json file in the root directory.
Single-package projects: LerNA is not used, such as developing an NPM package that contains some functionality and only requires a single project from a Git repository.

I’m going to use

Multi-package projects: If you want to develop a component library, or a large tool library. This project is not suitable for one NPM package, so it needs to be split into multiple NPM packages. In this case, a Git repository is used to manage multiple NPM packages. This is where lerna comes in handy.

Many package project

Take the component library as an example. If all components are placed in a Git repository and published in an NPM package, users who want to use a component in this repository can only install our component library as a whole. However, if each component is packaged separately, for example if a user uses only the Button component of the component library, the user can install only the button component (NPM install@my-ui /button), which is more flexible. Another benefit is that if we change the code of the other TOAST component, the single package project will have to be released again, and the user will update the new package, but the button he or she is using remains unchanged, which is unnecessary. For the multi-package project, we changed the code of toast component and re-distributed the TOAST package and the whole package. But without having to reissue the Button component package (the version number of the Button component package will not change), it is appropriate.
Take the Babel library for example. The Babel library is also a typical multi-package Git repository. Let’s go to Babel’s Github repository. Packages folder contains a bunch of NPM packages, babel-CLI, babel-core, babel-preset-env, etc. We, as users, just install the packages we need for our own projects. Babel is also managed by Lerna.
On the other hand, if the NPM packages are managed completely separately, one Git repository under one NPM package, it can be very difficult to maintain, and the packages are strongly related to each other. It is better to put it in a Git repository and use Lerna to manage it.

Lerna definition

Lerna is a tool that helps us manage multiple NPM packages in a Git repository.

NPM i-g lerna lerna init --independentCopy the code

Fixed vs. independent

There are two modes for initializing a Lerna managed project: fixed (default) and independent (lerna init with –independent). The key difference between the two modes is how the versions of the subpackages are managed.

Fixed mode: The version number uses the version attribute in the lerna.json file in the project root directory. When lerna publish is executed, if the code is updated, the version number is automatically updated. Other subpackages that have been changed are also automatically updated. The version number of all packages is related to the version in the lerna.json file in the root directory. The Babel library uses this pattern.
Standalone mode: the version numbers of subpackages are maintained independently of the configuration of the root directory. Each time you publish, you have to set the version for each changed subpackage.

I think it may be that, for subpackages with high correlation, such as Babel, it is appropriate to use fixed mode, for example, component library subpackages with low correlation, use independent mode, version maintenance is more free.

Project structure managed by Lerna

my-ui/
  package.json
  lerna.json
  packages/
    Button/
      src/
      package.json
    Toast/
      src/
      package.json
  ...
Copy the code

Button and Toast are separate NPM packages. You can also use an editor such as vscode to just open the Button folder and develop this component. There is no need to do this, just to show that the Button folder is a separate subproject. NPM install vue webpack Babel, etc., will be installed in the Button folder, generating node_modules folder. NPM install and vue webpack Babel are also used to install packages under the Toast folder. On the one hand, it is troublesome to execute the installation command repeatedly. On the other hand, it is also a waste of disk. Lerna provides the lerna bootstrap command to solve this problem.

The command

lerna bootstrap

Performing lerna bootstrap is equivalent to NPM install for all subprojects under Packages.

If you don’t do Lerna configuration, the dependencies will be installed separately in the node_modules folder of each subpackage. This is a waste of disk and the same dependencies are installed all over again in subpackages.

Node_modules/my-ui/ package.json lerna.json packages/ Button/ node_modules/ SRC/package.json Toast/ node_modules/ src/ package.json ...Copy the code

In Lerna configuration, the dependency packages are installed in node_modules under the root directory, while none of the subpackages have node_modules, so that the dependency packages can be managed uniformly.

// Configure the Lerna reactive, Json lerna.json packages/ Button/ SRC/package.json Toast/ SRC / package.json ...Copy the code

Configuration Lerna Hoisting

Do the following configuration, and the Lerna collieries will take effect.

// Configure lerna.json: {... "NpmClient ":" YARN ", "useWorkspaces": true} // package.json configuration {"private": true... "workspaces": [ "packages/*" ], }Copy the code

lerna clean

When you have installed the following dependencies in the subpackage, use Lerna clean to clean the node_modules/ in the subpackage, and then use Lerna bootstrap to reinstall the dependencies.

lerna publish

Lerna publish was mentioned above in the introduction of fixed mode, standalone mode. Once the package is developed, publish it to the NPM source. Using lerna publish is to publish to the NPM source. Update policies with different version numbers are used based on fixed and independent modes.

Configuration lerna. Json: "command" : {" publish ": {" registry" : "https://registry.npmjs.org"}}, "ignoreChanges" : [ "ignored-file", "**/__tests__/**", "**/*.md" ]Copy the code

Set command. Publish. Registry: publish address
Set ignoreChanges: Tells LERna that these file changes do not require a version update.

lerna add

Suppose I want to install LoDash for all the subpackages in my component library. Traditionally, go to NPM install Lodash for each subpackage folder. With lerna, we can run the command lerna add Lodash in the root directory. You can see loDash in the dependencies field in package.json.

npm install lodash
Copy the code

Again, lerna makes it easy for us to manage multi-package projects. The use of Lerna Add simplifies the situation where you need to install the same dependency for all the subpackages.

Also, if you only want to install LoDash for the Button component, do so

lerna add lodash --scope=@my-ui/Button
Copy the code

Instead of NPM I lodash directly in the Button folder, the dependencies are installed in the root directory node_modules.

lerna create

If you want to create a new lerna subpackage, use

lerna create @my-ui/Input 
Copy the code

The Input folder, a subproject, is generated under the Packages folder.

my-ui/
  package.json
  packages/
    Button/
      src/
      package.json
    Input/
      src/
      package.json
    Toast/
      src/
      package.json
  ...
Copy the code

As an added bonus, if you want to build a component library, you can create a main package, a toolkit

lerna create @my-ui/my-ui
lerna create @my-ui/Utils

my-ui/
  package.json
  packages/
    Button/
      src/
      package.json
    Input/
      src/
      package.json
    Toast/
      src/
      package.json
    Utils/
      src/
      package.json
    my-ui/
      src/
      package.json
  ...
Copy the code

The Utils subpackage is used to hold utility functions for use by other components, and the my-UI subpackage refers to all other component packages installed by users who want to use all of our component libraries.

lerna add @my-ui/Utils --scope @my-ui/Button
lerna add @my-ui/Utils --scope @my-ui/Input
lerna add @my-ui/Utils --scope @my-ui/Toast

lerna add @my-ui/Button --scope my-ui
lerna add @my-ui/Input --scope my-ui
lerna add @my-ui/Toast --scope my-ui
Copy the code

Execute the command above to complete the reference to the sub-room.

conclusion

In terms of usage scenarios, lerNA is suitable if we develop multi-package projects.
Lerna is the choice of many star libraries. We can see Lerna in Babel, React, Element-UI, etc.
You can choose fixed mode or standalone mode according to your needs
Packet promotion (Lerna reactive) is a very useful feature of Lerna.
Lerna’s commands are for our convenience in managing multi-package projects, managing their dependencies, and maintaining version numbers when releasing.

This article is intended to help you understand lerNA usage scenarios and its basic usage.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Lerna learns and understands

Scope of application

It’s not going to be used

I’m going to use

Many package project

Lerna definition

Fixed vs. independent

Project structure managed by Lerna

The command

lerna bootstrap

Configuration Lerna Hoisting

lerna clean

lerna publish

lerna add

lerna create

conclusion

Lerna learns and understands

Scope of application

It’s not going to be used

I’m going to use

Many package project

Lerna definition

Fixed vs. independent

Project structure managed by Lerna

The command

lerna bootstrap

Configuration Lerna Hoisting

lerna clean

lerna publish

lerna add

lerna create

conclusion

Related Posts

Algorithm brush – linked list

Cross-monitor IntersectionObserver practices and issues are summarized

Use Webpack to explain the packaging process and solve common problems