This is my third day of the November Gwen Challenge. Check out the final Gwen Challenge 2021 for more details

preface

Front-end code management solutions can be traced back to the release of NodeJS and NPM (it will be compared with Python PIP, Conda, Rust Cargo, etc.). The subsequent integrated front-end frameworks or front-end engineering solutions are almost managed on the basis of NPM. However, there are many new solutions proposed to address the shortcomings of NPM and the problems faced by modern front-end development. Here is an overview of these scenarios and solutions.

Front-end package management evolution

NPM

NPM uses package.json to store its semantic versioning (SEMver) information, which follows the dominant major version number. Patch version number to identify third-party dependencies across machines and developers, which solves the problem of front-end package management from 0 to 1. NPM itself has a number of problems: version control does not strictly synchronize the dependency libraries for the patch version on each machine; Most NPM libraries have deep nested dependencies. This has led to the evolution of subsequent package management schemes.

Yarn

Yarn is proposed to solve the problem of inconsistent patch versions in THE NPM. The yarn.lock file is used to fix the version number of the installation, and parallel installation is adopted to improve the installation speed of dependency packages. Package-lock. json was later added to NPM for the same purpose.

pnpm

An introduction to PNPM can be found in this article: Deep Thoughts on modern package managers — Why do I now recommend PNPM over NPM/YARN?

PNPM is a recommended tool for front-end development because it is fast to install, uses hard link to install, consumes little disk space, solves shadow dependency problem, supports MonorePO naturally (see the next section for more information), and can replace NPM and YARN at a low cost.

Monorepo and lerna

An introduction to MonorePO can be found in this article: Why is Modern front-end engineering increasingly dependent on MonorePO?

Monorepo solves the problem of front-end project bloat and division of labor. Lerna is the representative of the actual tool, which is currently used in many famous projects such as Babel.

Afterword.

It is worth noting that many of the advantages of other tools will be adopted and incorporated into other package management tools as the major vendors perform their respective roles and evolve. For example, NPM emulates yarn.lock, yarn2 updates support PNPM, and PNPM naturally supports Monorepo.

Developers may be confused about which tools to use, which requires in-depth understanding and selection based on the actual situation of the project. In general, the author tends to adopt the new technology as much as possible when developing small and medium-sized projects and new projects, which is not only conducive to my knowledge expansion and progress, but also to experience the thinking brought by the continuous development of the front end.