lerna playground

This example project demonstrates the address

Lerna website

lernaGithub

Lerna start

Lerna 2.x is the recommended starting version at lerna.org

npm install --global lerna
Copy the code

Next we’ll create a new Git repository:

git init lerna-repo
cd lerna-repo
Copy the code

Create a new LERNA repository or upgrade an existing repository to the current version of LERNA.

lerna init
Copy the code

The following information is displayed:

    lerna notice cli v4. 0. 0
    lerna info Creating package.json
    lerna info Creating lerna.json
    lerna info Creating packages directory
    lerna success Initialized Lerna files
Copy the code

Create a package package

Lerna create mylerna // Create the package name mylernaCopy the code

The following files have been generated for us by default:

__test__ // unit test lib // entry lib main file package.json // configuration file readme. MD // READMECopy the code

Install dependencies

The dependency installation package yargs is used as an example in three cases.

Lerna add yargs // now it will be installed in all projects under packages; Mylerna add yargs packages/mylerna // install dependency packages to specified projects under packages; NPM I yargs // will be installed into the learn root dependency;Copy the code

The successful installation is as follows:

info cli using local version of lerna
lerna notice cli v4. 0. 0
lerna info Adding yarn in 1 package
lerna info Bootstrapping 2 packages
lerna info Installing external dependencies
lerna info Symlinking packages and binaries
lerna success Bootstrapped 2 packages
Copy the code

Add the dependent

With Lerna create we create multiple packages under packages: CLI, Create, init;

Json and configure the name fields in packes. json at initialization named:

@frontendPlayer /cli, @frontendPlayer /init, @frontendPlayer /createCopy the code

To avoid conflicts @frontendPlayer gave us a custom NPM package organization name;

Add dependencies to package mylerna:

"dependencies": { "yargs": "^ 17.1.1," "@ frontendplayer/cli" : "^ 0.0.0", "@ frontendplayer/init" : "^ 0.0.0", "@ frontendplayer/create" : "^ 0.0.0"}Copy the code

linkLinks to rely on

Perform dependency links in our Mylerna package

 lerna link 
Copy the code

Node_modules adds the @frontendPlayer file, which contains cli/create/init soft links

Global link

npm link  
Copy the code

The following information is displayed:

added 1 package, and audited 3 packages in 4s

found 0 vulnerabilities
Copy the code

View the global link result

NPM root -g // Windows: C: Program Files\nodejs\node_modulesCopy the code

There is an additional link package for @frontendPlayer in the corresponding directory

publishPublished online

Lerna version // Check the version lerna publish // publishCopy the code

The initial release requires an initial project commit to Git to establish a connection to a remote repository;

NPM public service is listed below:

OrganizationCreate a group

Click log in and create the NPM organization

Example: Create an organizationfrontendplayer

Successful creation:

publishConfigChange to public service

Will need to be released to the public of the package. The organization json, publishConfig fields instead as shown below:

   "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org"
  },
Copy the code

npm loginLogin NPM

Ensure that the NPM login is successful

npm login 
Copy the code

versionSelect version

Lerna project has two modes: Fixed/Locked mode (the default) | Independent mode, and their corresponding package version management in two ways.

Fixed/Locked mode (default)

This mode synchronizes all package versions with a major version number, which is the version in lerna.json

{"version": "0.0.0"} copies codeCopy the code

Independent mode

In this mode, each package can maintain its own version number independently. To specify the independent running mode, specify the version configuration in lerna.json as follows:

{
  "version": "independent"
}
Copy the code

The demo project is in fixed mode, where all packages under Packages are uniformly upgraded to:^ 0.1.3, as follows:

Successful release:

Successfully published:
 - @frontendplayer/cli@0.13.
 - @frontendplayer/create@0.13.
 - @frontendplayer/init@0.13.
 - @frontendplayer/mylerna@0.13.
lerna success published 4 packages
Copy the code

NPM public FrontendPlayer

The project specification

Eslint, Prettier, EditorConfig and other tools standardize code style to ensure code quality;

eslint– Uniform code quality

Eslint is a plugin-configurable javascript syntax rule and code style checker

  • Code quality issues
    • The usage may be problematic
  • Code Style issues
    • Style does not conform to certain rules
  npm i eslint --save-dev       
Copy the code

.eslintrc.js

The core configuration is as follows:

module.exports={
    extends:['eslint:recommended'],
    parserOptions:{
        ecmaVersion:2017,
        sourceType:'module'
    },
    rules:{

    },
    env:{
        node:true,jest:false
    }
}
Copy the code

For more configuration, see the documentation esLint

.eslingignore

Neglecting to check directories

__tests__
Copy the code

Tips if vscode can install its own plug-in

Prettier– Uniform code style

Prettier solves code style problems, exporting code style in a uniform and fixed format. Is an independent code formatting tool;

npm i prettier eslint-plugin-prettier --save-dev
Copy the code

Modified. Eslintrc. Js

Modify plugins and rules properties in eslintrc to mix Prettier and ESLint;

module.exports = { extends: ["eslint:recommended"], parserOptions: { ecmaVersion: 2017, sourceType: "Module ",}, plugins: ["prettier"], // Close rules that conflict with ESLint; Rules: {"prettier/prettier": ["error", {endOfLine: "auto"}],}, env: {node: true, jest: false,},};Copy the code

Create the. Prettierrc file

A. prettierrc is created in the root directory and common formatting rules are configured.

{
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 200,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "semi": false
  }
  
Copy the code

tipsifvscodeYou can install plug-ins by yourself

Editorconfig editor configuration

Helps developers define and maintain a consistent coding style across different editors and ides

EditorConfig is a tool for coordinating and standardizating code styles for different developers and editors.

  • instructions
    • In Unix, there is only a newline at the end of each line, i.e. \n LF(line Feed)
    • In Windows, each line ends with a newline return, that is, \r\n CR/LF
    • On the Mac, each line ends with a Carriage Return, i.e. \ R CR(Carriage Return)

Root directory to create. Editorconfig, and configure the editor uniform rules;

root=true

[*]
indent_style=space
indent_size=2
end_of_line=lf
charset=utf-8
trim_trailing_whitespace=true


[*.md]
trim_trailing_whitespace=false

Copy the code

tipsifvscodeYou can install plug-ins by yourself

Specification summary

Unified code style and specification in the development process, in different editor environment, to maintain a unified style is conducive to code maintenance and code quality assurance;

The reference command

Project initialization

The command instructions
lerna init Initialize the project

Create a package

The command instructions
lerna create Create a package bag
lerna add Install dependencies
lerna link Links to rely on

Development and debugging

The command instructions
lerna exec Executing shell scripts
lerna run ‘command’ Execute NPM command’ command’
lerna run ‘command’ –scope ‘packageName’ Run NPM ‘command’ for specific packageName
lerna clean Empty the rely on
lerna bootstrap Reinstall dependencies

Published online

The command instructions
lerna version Changing the Version number
lerna change View all changes since the last version