This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Scaffolding Tips for front-end Architects (part 3)

  • Analysis of the pain points of native scaffold development
  • Lerna introduction and scaffolding development process
  • Actual practice: Build scaffolding frame based on LERNA
  • Lerna core operation
  • Lerna publishing process

Analysis of the pain points of native scaffold development

Lerna solved the problem

  • Pain point 1: repeat operation

    • Multi-package local link
    • Multiple packages depend on installation
    • Multiple Package unit tests
    • Multiple Package code commits
    • Multiple Package code releases

  • Pain point 2: version consistency

    • Release consistency
    • Interdependent versions are upgraded after release

    The more packages, the higher the management complexity

Lerna profile

Lerna is an administrative tool for managing JavaScript projects that contain multiple packages.

Lerna is a tool optimized for workflow management of multi-package code repositories using Git and NPM

www.lernajs.cn/

advantage

  • Significantly reduce repetitive operations
  • Improve standardization of operations

Lerna is the product of architectural optimization, which reveals an architectural truth: as the complexity of a project increases, it is necessary to optimize the architecture of the project. The primary goal of architecture optimization is often efficiency.

case

Elephant projects managed using Lerna:

  • babel: github.com/babel/babel
  • Vue – cli: github.com/vuejs/vue-c…
  • The create – react – app: github.com/facebook/cr…

Lerna develops scaffolding processes

Build scaffolding frame based on Lerna

$ mkdir colion-cli-dev && cd colion-cli-dev
$ npm init -y
$ npm install lerna -D
$ npm install lerna -g # Recommended global installation
$ lerna -v Check lerna version number4.0.0 $lerna initInitialize lerna
info cli using localVersion of Lerna Lerna notice CLI v3.22.1 LERna info Initializing Git repository lerna info Updating package.json lerna info Creating lerna.json lerna info Creating packages directory lerna success Initialized Lerna files $ tree -I"node_modules" >README.md View the initialized directory structure and save it in readme.md├ ─ ─ the README. Md ├ ─ ─ the README. Mdtree ├ ─ ─ lerna. Json ├ ─ ─ package - lock. Json ├ ─ ─ package. The json └ ─ ─ packagesThe directory where the subpackage is stored
$ touch .gitignore
Copy the code
# .gitignore
.vscode
.idea
.histroy
node_modules
packages/**/node_modules
package-lock.json
Copy the code

@lerna/create

Create a package managed by LERna

Usage

lerna create <name> [loc]
# name package-name
# loc specifies the path
Copy the code

Creating a core packagecore

$lerna create core package name: (core) @colion-cli-dev/core version: (0.0.0) 1.0.0 $tree -i"node_modules". ├ ─ ─ the README. Md ├ ─ ─ the README. Mdtree ├ ─ ─ lerna. Json ├ ─ ─ package - lock. Json ├ ─ ─ package. The json └ ─ ─ packages └ ─ ─ the coreCORE package├ ─ ─ the README. Md ├ ─ ─ __tests__ │ └ ─ ─ the core. The test. The js └ ─ ─ lib └ ─ ─ core. JsCopy the code

Creating a Toolkitutils

$lerna create utils package name: (utils) @colion-cli-dev/utils version: (0.0.0) 1.0.0Copy the code

Create the @colion cli-dev organization

Registered successfully

Lerna core operation

Lerna add

Add a dependency to matched packages

Install dependencies related to the specified Packages

# Usage
$ lerna add <package>[@version] [--dev] [--exact] [--peer]
Copy the code
Install dependencies to a specific package
$ lerna clean # delete dependencies
info cli using localVersion of LERna LERna Notice CLI v3.22.1 LERna Info Removing the following directories: lerna info clean packages/core/node_modules lerna info clean packages/utils/node_modules ? Proceed? (ynH) y >> Yes lerna info clean removing /Users/pm/colion-cli/colion-cli-dev/packages/core/node_modules lerna info clean  removing /Users/pm/colion-cli/colion-cli-dev/packages/utils/node_modules lerna success clean finished $ lerna add lodash packages/core/Add dependencies only to the core package
Copy the code
$ lerna add -h lerna add <pkg> [globs..]  Add a single dependency to matched packages ... Examples: lerna add module-1 packages/prefix-* Adds the module-1 package to the packagesin the 'prefix-' prefixed
                                              folders
  lerna add module-1 --scope=module-2         Install module-1 to module-2
  lerna add module-1 --scope=module-2 --dev   Install module-1 to module-2 in devDependencies
  lerna add module-1 --scope=module-2 --peer  Install module-1 to module-2 in peerDependencies
  lerna add module-1                          Install module-1 in all modules except module-1
  lerna add module-1 --no-bootstrap           Skip automatic `lerna bootstrap`
  lerna add babel-core                        Install babel-core in all module
Copy the code

Focus on examples

lerna link

Link the dependencies under all lerNA managed packages

lerna exec

Execute command under all packages

$ lerna exec -- <command> [...args] # runs the command in all packages
# Example
$ lerna exec -- rm -rf node_modules/  Delete all node_modules under packages
$ lerna exec --scope utils -- rm -rf node_modules/ # specified scope
Copy the code

lerna bootstrap

Perform the bootstrap process in the current Lerna repository. Install all dependencies and link any cross-dependencies.

This command is critical because it allows you to use therequire()Load directly with the package name as if the package already exists in yournode_modulesSame in directory.

lerna run [script\]

Run this NPM script in every package that contains the [script] script.

$ lerna run test
The NPM run test script will be executed for all packages
$ lerna run --scope @colion-cli-dev/utils test 
Execute the NPM script command to execute the package
Copy the code

Lerna publishing process

lerna version

lerna changed

lerna diff

# Code submission
$ git add .
$ git commit -m"init"
Check the version number
$ lerna version
info cli using localVersion of LERna LERna notice CLI v3.22.1 LERna Info current version 0.0.0 lerna ERR! ENOREMOTEBRANCH Branch'master' doesn't exist in remote 'origin'. lerna ERR! ENOREMOTEBRANCH If this is a new branch, please make sure you push it to the remote first. $ lerna diff info cli using local version of lerna lerna notice cli V3.22.1 # Modify any file, $lerna diff info cli using local version of lerna lerna notice cli v3.22.1 diff --git a/packages/core/lib/core.js b/packages/core/lib/core.js index 3bffcf4.. E817153 100644 - a/packages/core/lib/core js + + + b/packages/core/lib/core. Js @ @ - 3, 5 + 3, 6 @ @ module. Exports = core; Function core() {- // TODO + // TODO + // CODE [email protected]: open/colion - cli - dev. Git # check remote warehouse $git remote - v # push to remote master branch And set to the default $git push "--set-upstream origin master # login # publish info cli using local version of lerna Notice CLI V3.22.1 LERna info current version 0.0.2 LERna notice current HEAD is already released, skipping change detection. lerna success No changed packages to publishCopy the code
lerna ERR! E402 You must sign up for private packages
# Solutions
$ touch LICENSE.md
# modified package. Json
# increase
"publishConfig": {
    "access": "public"
}
Successfully published:
 - @colion-cli-dev/[email protected]
 - @colion-cli-dev/[email protected]
Copy the code