This is the 28th 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 (4)

  • Lerna source code structure analysis and debugging skills
  • Node source debugging process will be a small skill
  • Learna initialization process source code detailed analysis
  • [Advanced] NPM project local dependency reference method

Why do source code analysis?

  • The need for self-growth, enhanced coding ability and technical depth
  • For my use, applied to the actual development, the actual benefit
  • Learn from others, stand on the shoulders of giants, climb high and look far

Why analyze Lerna source code?

  • 3W+ Star Star project
  • Lerna is scaffolding, which can be used as a reference for the development of scaffolding
  • The Lerna project contains many best practices that deserve further study and learning

Objectives/Outputs

  • Lerna source code structure and execution process analysis

  • Import-local source depth precision

  • Scaffolding implementation process of an idea

  • Scaffolding debugging is a method of native source code

  • Node.js Process for loading node_modules

  • Various file manipulation algorithms and best practices

Lerna 4.0.0 source code structure analysis

Source code repository github.com/lerna/lerna

The directory structure

$ tree -I  "node_modules"-l 2. ├─ CHANGELOG. Md ├── CONTRIBUTING. Md ├─ FAQ │ ├─ __independent │ ├─ __normal │ ├─ cycle-intersection │ ├─ cycle-separate │ ├─ independent │ ├ ─ ─ licenses │ ├ ─ ─ licenses - missing │ ├ ─ ─ licenses - names │ ├ ─ ─ lifecycle │ ├ ─ ─ lifecycle - rooted - leaf │ ├ ─ ─ Lockfile-leaf │ ├─ Normal │ ├── Pack-directory │ ├─ Prerelease-independent │ ├─ Root - manifest - only │ ├ ─ ─ toposort │ └ ─ ─ yarn - link - spec ├ ─ ─ commands │ ├ ─ ─ __mocks__ │ ├ ─ ─ the add │ ├ ─ ─ the bootstrap │ ├ ─ ─ Changed │ ├── Clean │ ├─ Create │ ├─ Diff │ ├─exec│ ├ ─ ─ the import │ ├ ─ ─ the info │ ├ ─ ─ init │ ├ ─ ─ the link │ ├ ─ ─ the list │ ├ ─ ─ the publish │ ├ ─ ─ the run │ └ ─ ─ version ├ ─ ─ the core │ ├ ─ ─ Child-process │ ├─ cli │ ├─command│ ├─ Traditional-activity │ ├─ Filter-Options │ ├─ Global-Activity │ ├─ Package │ ├─ Package-graph │ ├── Project │ ├── exercises │ ├─ guides. Md │ ├─ exercises Troubleshooting. Md ├ ─ ─ helpers │ ├ ─ ─ calls - back │ ├ ─ ─ cli - runner │ ├ ─ ─ clone - fixture │ ├ ─ ─ the command - runner │ ├ ─ ─ Commit-change-to-package │ ├─ copy-fixture │ ├─ find-fixture │ ├─ get-commit-message │ ├─ Git-Add │ ├─ Git-checkout │ ├ ─ ─ git - commit │ ├ ─ ─ git - init │ ├ ─ ─ git - merge │ ├ ─ ─ git - status │ ├ ─ ─ git - tag │ ├ ─ ─ init - fixture │ ├ ─ ─ Name-named │ ├─ Load manifests │ ├─ Logging │ ├─ Tri-Tri-Right │ ├─ Normalize-relative-Dir │ ├─ Name-named │ ├─ Load Manifests │ ├─ Logging │ ├─ Tri-Tri-Right │ ├─ Normalize-relative-Dir │ Anti-fascist exercises ── GpG-Matchers │ ├─ Anti-Fascist exercises ─ Series-Placeholder Exercises ─ Anti-Fascist exercises │ ├ ─ ─ serialize - Windows - paths │ ├ ─ ─ the set - NPM - userconfig │ ├ ─ ─ the show - commit │ ├ ─ ─ silence - logging │ └ ─ ─ the update - lerna - config ├ ─ ─ integration │ ├ ─ ─ __fixtures__ │ ├ ─ ─ lerna - add. Test. The js │ ├ ─ ─ lerna - the bootstrap - ci. Test. The js │ ├ ─ ─ │ ├─ Heavy Metal Flag - - Heavy metal Flag - - Heavy metal Flag - - Heavy metal flag - - Heavy metal flag - - Heavy metal flag - - Heavy metal flag - - Heavy metal flag - - Heavy metal flag - - Heavy metal flag Lerna - changed. Test. Js │ ├ ─ ─ lerna - clean. Test. The js │ ├ ─ ─ lerna - exec - since. Test. The js │ ├ ─ ─ lerna - exec. Test. The js │ ├ ─ ─ Test. Js │ ├─ Flag School - Ls.test. Js │ ├─ Flag School - Ls.test Test. Js │ ├─ Heavy Metal Exercises - Heavy metal Exercises - Heavy metal Exercises - Heavy metal Exercises - Heavy metal exercises │ ├─ Heavy Metal Flag school ─ Heavy metal Flag School ─ Heavy metal Flag School ─ Heavy metal Flag School ─ heavy metal Flag School ─ heavy metal Flag School ─ heavy metal Flag School ─ heavy metal Flag School ─ heavy metal flag School ─ heavy metal flag School ─ heavy metal flag School ─ Lerna - publish - but - independent. Test. Js │ ├ ─ ─ lerna - publish - custom - tag. The test. The js │ ├ ─ ─ lerna - publish - error. Test. Js │ ├─ Heavy Metal Exercises - Heavy metal Exercises - Heavy metal Exercises - Heavy metal Exercises - Heavy metal Exercises - Heavy metal Exercises - Heavy metal Exercises - Heavy metal Exercises │ ├─ Bass Exercises - Bassist Exercises - Bassist Exercises - Bassist Exercises - Bassist Exercises - Bassist Exercises - Bassist Exercises - Bassist Exercises - Bassist Exercises - Bassist Exercises Lerna - publish - relative - file - spec. Test. The js │ ├ ─ ─ lerna - publish - skip - NPM. Test. The js │ ├ ─ ─ lerna - publish - transitive. Test. Js │ ├ ─ ─ lerna - publish - validation. The test. The js │ ├ ─ ─ lerna - run - since. Test. The js │ └ ─ ─ lerna to run the test. The js ├ ─ ─ jest. Config. Js ├ ─ ─ ├─ ├─ download.exe ├─ Download.exe ├─ download.exe ├─ download.exe ├─ download.exe ├─ download.exe ├─ download.exe ├─ download.exe ├─ download.exe └─ Setup - integration - the timeout. Js ├ ─ ─ the setup - unit - test - a timeout. Js └ ─ ─ utils ├ ─ ─ check - working - tree ├ ─ ─ collect - uncommitted ├ ─ ─ Collect - Updates ├─ Create - Symlink ├─ Describe - Ref ├─ Get - NPM -exec- Opts ├─ Get - Get - Packed ├─ Lot - client ├ ─ ─ gitlab - client ├ ─ ─ from the NPM - version ├ ─ ─ listable ├ ─ ─ the log - the packed ├ ─ ─ the map - to - registry ├ ─ ─ NPM - conf ├ ─ ─ NPM - dist - tag ├ ─ ─ NPM - install ├ ─ ─ NPM - publish ├ ─ ─ NPM - run - script ├ ─ ─ the output ├ ─ ─ pack - directory ├ ─ ─ Prerelease-id-from-version School exercises ─ Profiler School Exercises ─ Pulse-till - Done School Exercises ─ Query-graph School Exercises ─ Rimraf-Dir School Exercises ─ The run - lifecycle ├ ─ ─ the run - topologically ├ ─ ─ symlink - binary ├ ─ ─ symlink - dependencies ├ ─ ─ the timer └ ─ ─ the write - log - fileCopy the code

Find workspace workspaces, [“commands/”, “core/”, “utils/*”] from package.json in the root directory

Go to package.json in core/lerna and find the entry file cli.js

// cli.js 
#!/usr/bin/env node

"use strict";

/* eslint-disable import/no-dynamic-require, global-require */
const importLocal = require("import-local");

if (importLocal(__filename)) {
  require("npmlog").info("cli"."using local version of lerna");
} else {
  require(".")(process.argv.slice(2));
}
Copy the code

WebStorm uses Debug to Debug Lerna code

0. Run the commandlerna boostrapInstall all package dependencies

1. The first step is to make a break point where you need to execute

2. Configure debug in the second part

Start Debug mode