“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Packagelock. Json/yarn. The lock to lock the version number, to ensure the consistency of the development environment and production environment, avoid incompatible API error result in production environment

Before we get to that, we need to know what Semver is: What semver is.

When we have a dependency in NPM I, the default version number is the latest version number ^1.2.3, starting with ^ to maximize the use of new features, but some libraries that do not follow this dependency may have problems.

^1.2.3 indicates >=1.2.3 <2.0.0, see Semver Checker

One question: How does the risk to the production environment arise when there is no LOCK file in the project?

The risk process is shown as follows:

  1. PKG 1.2.3: The latest version of the PKG library is installed in the development environment for the first time1.2.3.dependenciesDependency display^ 1.2.3The actual installation version is1.2.3
  2. PKG 1.19.0: Go online in the production environment and install the PKG library. The latest version is1.19.0To meet thedependenciesThe dependence^ 1.2.3Range, the actual installed version is1.19.0.butpkgThe semver specification was not followed and Breaking Change was introduced in the process, so at this time in the production environment1.1.0It leads to bugs and is difficult to debug

When the lock file is available, the version number of each dependency is locked in the lock file, and the version number of each dependency installation is obtained from the lock file, avoiding the risk of unmeasured dependencies.

  1. PKG 1.2.3: The latest version of the PKG library is installed in the development environment for the first time1.2.3.dependenciesDependency display^ 1.2.3The actual installation version is1.2.3.Version number locked in lock
  2. PKG 1.2.3: Go online in the production environment and install the PKG library. The version number in the lock file is1.2.3, in line with thedependencies 中 ^ 1.2.3The range will be installed in the production environment1.2.3, perfect line.

Do NPM third-party libraries need to submit lockfiles

Why do people say third-party libraries don’t need to commit package-lock.json/yarn.lock?

This view is valid only for dependencies of third-party libraries

A: All dependencies in your own project will be locked according to the lockfile, but not according to the lockfile that your third party relies on.

Take an example:

  1. In-project dependenciesThe react @ ^ 17.0.2
  2. while[email protected]Rely onObject - assign @ ^ 4.1.0

In React yarn.lock, version locking depends on the following:

[email protected] ├ ─ [email protected] (PS: please note the release number)Copy the code

In the personal service project yarn.lock, version locking depends on the following:

├ ── [email protected] ├ ─ [email protected]Copy the code

In this case, [email protected] in the personal business project is different from [email protected] in React, which may cause problems.

At this point, even though the third-party inventory is in lockfile, there is also an indirect dependency (in this case, object-assign, which is the dependency of the third party and the dependency of the individual business project) that cannot be controlled.

How do third-party libraries solve the potential problem of uncontrollable indirect dependencies

See next. Js for a solution.

Next. Js source click here

  1. Place the version numbers in all dependencies inpackage.jsonIn the lock. visiblepackage.json
  2. To introduce some dependencies directly after compilation, rather than through dependencies, as inwebpack,babelAnd so on. Visible directorynext/compiled

Here is part of package.json

{
  "dependencies": {
    "@babel/runtime": "7.15.4"."@hapi/accept": "5.0.2"."@napi-rs/triples": "1.0.3"}}Copy the code

In addition to locking the version numbers directly by referring to next.js, it is possible to maintain and update Depencencies over time according to ^ X.X.X

conclusion

Lockfiles are still essential for third-party libraries. React, Next-js, and webpack all have yarn.lock. (PS: Shows the popularity of YARN, and VUe3 adopts PNPM)

  1. Third-party librarydevDependenciesIt must be locked so that Contributor can easily run the project based on the lockfile.
  2. Third-party librarydependenciesAlthough there may be uncontrollable problems, they can be resolved by locking dependencies or updating frequently.