Lerna profile

A tool formanaging JavaScript projects with multiple packages. A tool for managing multiple JavaScript packagesCopy the code
What’s the use?
2. Use Git to detect file changes and release files automatically 3. Based on git submission records, CHANGELOG is automatically generatedCopy the code

This paper will also practice Lerna from these three aspects

1. Create a Lerna project

  1. Global install Lerna:npm install lerna -g
  2. Initialization:
mkdir myLerna
cd myLerna
lerna init --independent
Copy the code

The following directory structure is obtained

- myLerna - | - packages (directory) - | - lerna. Json (profile) - | - package. The json (project description file)Copy the code
  1. Create a package
// Access the Packages directorycdPackages // Create a packge directory mkdir packge-1 // Go to the packge-1 package directorycdPackge-1 // Initializes a package NPM init-yCopy the code

4. Install ESLint and prettier globally

// Go to the root directorycdMyLerna add eslint // Next, select esLint --init // install the new dependency NPM install for ESLintCopy the code

After the above steps are complete, you will find the eslintrc.json file in the root directory of the project (I chose JSON configuration mode). The next step is to configure ESLint as needed.

NPM I -d prettier NPM I -d eslint-plugin-prettier Installing prettier: NPM I -d prettier NPM I -d eslint-plugin-prettier When installing prettier, the system does not automatically generate the prettierrc.js configuration file.

Json, esLinttrc. Json, where I use TS, would end up like this:

extends: [
    "eslint:recommended"."plugin:@typescript-eslint/eslint-recommended".'plugin:prettier/recommended'.'prettier/@typescript-eslint',].Copy the code

2. Release related

How to publish

To do this, you need to associate your remote repository and create a.gitignore file.

When lerna publish is performed, it is synchronized to github and NPM, but NPM does not allow package duplication, so your package-1 project name should be modified to avoid duplication and NPM login

So:

  1. Associated remote warehouse
  2. renamepackage-1forwuwei-1(notepackage.jsonandpackage-lock.jsonGit commits the change code.
  3. npm loginThe login
  4. lerna publish, and check whether the remote repository (Github) and NPM have published packages.

How to pack

The reality is that the packages you distribute to NPM are actually your source code, and more often than not, if you want to distribute the packaged code, you need to introduce WebPack (or whatever) for the packaged configuration.

Note the following points (without going into detail) :

  1. Relevant packaging configurations need to be introduced in subprojects, such aswebpack.config.dev.js.
  2. How do I specify a folder for packages published to NPM? inpackage.jsonWell definedfiles, which contains the files that need to be published to NPM.
  3. The next step is to write your own packaging commands (for dev and Pro environments).

3. Add a husky

Husky can perform esLint validation and specification validation of commit information before committing.

npm i -D husky lint-staged @commitlint/cli @commitlint/config-conventional
Copy the code

Create. Huskyrc. Js

module.exports = {
  hooks: {
    "pre-commit": "lint-staged"."commit-msg": "commitlint -E HUSKY_GIT_PARAMS",}};Copy the code

Create lintstagedrc. Json

{
  "src/**/*.js": "eslint"
}
Copy the code

Create commitlint. Config. Js

module.exports = {
  extends: ['@commitlint/config-conventional'].rules: {
    // type Type definition
    'type-enum': [
      2.'always'['feat'.// 新功能 feature
        'fix'./ / fix the bug
        'refactor'.// Refactoring (neither adding new features nor fixing bugs)
        'doc'.// Document comments
        'test'.// Add tests
        'chore'.// Changes to the build process or accessibility tools
        'style'.// Code format (changes that do not affect code execution)
        'revert'./ / back to back]],// Subject case is not checked
    // The auto-deployed BUILD ROBOT commit information is capitalized for distinction
    'subject-case': [0,}}Copy the code

Unit testing

As a JDK project, unit testing is essential, but just like testing on a normal project. So the documentation on the official website is more straightforward: Jest. Note that your unit tests are in a subproject, so make no mistake.

5. To summarize

Due to the development of SDK in the project, we decided to use LARNA for modular management in order to unify the management in the future. In practice, WE found that LARNA is very easy to use, without any problems in itself, and more problems are in the use of other additional functions. Soon webpack5 + lerna will be a new direction for microfrontend, which is worth looking forward to.

Pre-learn the demo address of Lerna