preface

This is a note on the process of lerNA practice for the first time, recording the pits encountered in the process of practice, as well as the method of filling the pits.

To start lerna’s practice, you need to do your homework.

1. Software: NodeJS and Git must be installed

Nodejs version: node: ‘14.15.3’

Git version: Git version 2.29.2.Windows.3

2. Account preparation: To directly use the official website account here, you need to register an account on NPM official website, and also register a user on Github and create a Git repository. If business needs, we can also build private libraries such as NPM and Gitlab by ourselves.

Install vuE-CLI3: you can also use other front-end frameworks such as React, Next, etc. This article chooses to use vuE-CLI for practice.

Abstract

Lerna was used to achieve project management and initially set up the project framework

The body of the

Install LERNA

Lerna version: 4.0.0

The installation command is as follows:

npm install --global lerna

Initialize project lerna-demo3

By default, LERNA has two management modes, fixed mode and independent mode

Fixed mode

Fixed mode, versioning by lerna.json version. When you execute lerna publish, if only one module has been changed since the last release, the corresponding module version will be updated to the new version number, and then you can only publish the changed library. This model is the same one Babel uses. If you want all versions to change at once, you can update the Minor version number, which will cause all modules to be updated.

Stand-alone mode

–independent. The standalone mode allows administrators to change the version number for each library individually, and you need to specify the version number for each changed library each time you release it. In this case, the version number of lerna.json does not change. Independent in the article.

Independent mode is used here.

// Create a project folder
mkdir lerna-demo2
// Go to the folder
cd lerna-demo2
// Initialize the project
lerna init --independent
Copy the code

The project catalog is as follows:

3. Associate git repository

Run it under Git bash in Windows

// Add a git repository address
git remote add origin https://github.com/419572718/lerna-demo3.git
Copy the code

Iv. New sub-projects

Subprojects must be placed under the Packages folder. Here I’ve created a new subproject in three ways

1, NPM init

// Create a new subproject folder
mkdir n-input
// Go to the folder
cd n-input
// Initialize the project
npm init
Copy the code

Note that the project name does not conflict with an existing NPM project

2. Vue -cli vue create command

// Create a new subproject, project-a
vue create project-a
// Create a new subproject liuy-INPUT
vue create liuy-input
Copy the code

3, lerna create

// Create a new subproject j-INPUT
lerna create j-input
Copy the code

Note: You can also import git repository projects using the lerna import command, or copy and paste them directly into the Packages folder.

Create a post-project Packages directory:

Note 2: You can import node_modules using the lerna bootstrap command. If you want to add dependencies, you can add the dependencies to import in the package.json configuration file and then perform lerna Bootstrap automatic import.

Commit code to repository: NPM repository and Git repository

1. Commit code to git repository

Commit using Git bash in Windows

Note: Ignore files that do not need to be submitted, such as logs. Otherwise, errors will be reported during the release

The files to be ignored are configured into the.gitignore file

git add .  // Commit to the local staging area
git commit -m "New project Demo3"  // Commit to the local repository
git push origin master  // Commit to a branch of the remote repository
Copy the code

2. Publish code to NPM repository

// Publish all subprojects in the project
lerna publish
Copy the code

The release effect is as follows:

This is not the case for the first commit, but the process is basically the same for each commit. When publishing successfully, the registered email address of the NPM account will receive the successful publishing email.

Remark:

If the following success message is displayed:

If you are certain that a project has been modified, it is likely that the release failed and Lerna did not indicate it. You will need to go to the directory of the subproject and submit it manually using NPM publish. In most cases, you will see the error message when publishing. Of course, it is also possible to publish successfully without any error. Why would this happen? I don’t know.

Add project dependencies

This dependency was not found: must be a published project to add properly, otherwise the project will start with an error. Once a dependency is added successfully, it can be directly modified later. The effect of modification will be directly reflected in the project that introduced the dependency, and there is no need to commit the modification to the repository.

For example, to import project A from liuy-input, run the lerna command as follows:

// import liuy-input into project-a
lerna add liuy-input --scope=project-a
Copy the code

This liuy-Input project can be used as a component in the project-a to implement version dependency management for the component.

Vii. Project modification and submission for modification

The modified submission process is the same as the new submission process, so I won’t go into details here.

Eight, problem record

NPM init and lerna create command create a subproject, import vue project, vue project start error

You need to add esLint package dependencies to the dependent project:

/ / import eslint
npm install --save-dev eslint
// Initialize eslint
./node_modules/.bin/eslint --init
Copy the code

When you initialize ESLint, you will have several options, just choose according to the situationAfter initialization, you also need to change dev.es2021: true in the eslintrc configuration file to ES6: true or some other version es, and change ecmaVersion: 12 to 10

conclusion

By building the lerna project framework, I had a relatively superficial understanding of the tool. To gain a deeper understanding of a tool requires constant use and exploration in daily development. If not, we’ll never understand the framework or tool, and practice matters.

Afterword.

As you can see, this demo intends to manage components as subprojects, as has been mentioned in other posts. Personally, I feel this way is very good, and it is a good direction for development. How the specific effect, but also to see in the development of the application.