Yarn is a tool that cannot be separated from work. However, many people only use Yarn install and manually delete Node-modules or delete the yarn.lock file. This article will start with some basic knowledge, step by step to give you a deeper understanding of Yarn, to ensure the standard use of Yarn, to avoid some hidden bugs. This article mainly introduces the following knowledge:
- What is the registry
- The version meaning and writing method of dependency
- Dependency Types and differences (
devDependences
.devDependences
.peerDependences
.optionalDependencies
.bundledDependencies
)- The cache is introduced
yarn.lock
The function and introduction of the documentyarn install
The process of installing dependencies- Module flattening of dependency tree
- The commonly used
yarn
Command to introduce
What is the registry
Registry is a module repository that provides a query service, also known as a source. Yarn official image source, for example, the query service web site is https://registry.yarnpkg.com.
The url is followed by the module name, resulting in a JSON object containing information about all versions of the module. Visit https://registry.npmjs.org/vue, for example, you will see the vue module all versions of the information.
After the module name of the Registry url, you can also follow the version number or label to query information about a specific version. https://registry.yarnpkg.com/vue/2.6.10
In the JSON object returned above, there is a dist. Tarball property, which is the url of the version of the compressed package. The dist. Shasum property is equivalent to a hash value and is used in locking and caching, as described below.
dist: {
"shasum": "a72b1a42a4d82a721ea438d1b6bf55e66195c637"."tarball":"https://registry.npmjs.org/vue/-/vue-2.6.10.tgz"
},
Copy the code
When we run Yarn install, we query the above compressed package address from Registry to download it. At work, we may need to modify the mirror source scenarios, such as taobao source or their own company’s private source. To view and set the source, run the yarn config command to view the current mirror source
yarn config get registry
Copy the code
Modifying the image source (for example, changing the image source to Taobao)
yarn config set registry https://registry.npm.taobao.org/
Copy the code
Rely on the version
Yarn packages comply with semver, that is, the semantic version. SemVer is a set of semantically versioning conventions in the format of
X.Y.Z (major version number. Minor version number. Revision number) : x. Major version number: Increases the major version number Y when changes that are not backward compatible are made. Z. Revision number: A backward compatibility issue was fixedCopy the code
The version range in YARN can be expressed in the following ways:
- By comparator
said | To describe |
---|---|
The < 2.0.0 | Any version less than 2.0.0 |
< = 3.1.4 | Any version less than or equal to 3.1.4 |
> 0.4.2 | Any version greater than 0.4.2 |
> = 2.7.1 | Any version greater than or equal to 2.7.1 |
= 4.6.6 | Any version equal to 4.6.6 |
> = 2.0.0 < 3.1.4 | Intersection, greater than or equal to 2.0.0 and less than 3.1.4 |
The < 2.0.0 | | > 3.1.4 | The union is less than 2.0.0 or greater than 3.1.4 |
If no operator is specified, the default is =
- By hyphen
said | To describe |
---|---|
2.0.0-3.1.4 | > = 2.0.0 < = 3.1.4 |
0.4 2 | > = 0.4.0 < = 2.0.0 |
The missing parts of the version number are filled in with zeros.
- The X-range characters X, X, or * can be used as wildcards to fill in some or all of the version numbers. The omitted version number defaults to the X range.
said | To describe |
---|---|
* | >=0.0.0 (any version) |
2.x | >=2.0.0 <3.0.0 (matches major versions) |
X 3.1. | > = 3.1.0 < 3.2.0 (matches major and minor versions) |
‘ ‘(empty string) | * or > = 0.0.0 |
2 | 2.x.x or > = 2.0.0 < 3.0.0 |
3.1 | X or > = 3.1.0 < 3.2.0 |
- ~ Character range
The combination of the character ~ and the version number indicates permissionRevision number
The changes. The combination of the characters ~ and the major version number indicates permissionMinor version
No change.
said | To describe |
---|---|
~ 3.1.4 | > = 3.1.4 < 3.2.0 |
~ 3.1 | X or > = 3.1.0 < 3.2.0 |
~ 3 | 3. X or > = 3.0.0 < 4.0.0 |
- The character range character ^ indicates that the first non-zero digit in the version number, 3 in 3.1.4 or 4 in 0.4.2, will not be changed. The missing parts of the version number are filled in with zeros, and these locations are allowed to change when matching.
said | To describe |
---|---|
^ 3.1.4 | > = 3.1.4 < 4.0.0 |
^ 0.4.2 | > = 0.4.2 < 0.5.0 |
^ hundreds | > = hundreds < 0.0.3 |
Run the yarn add [package-name] command to install dependencies. The default value is ^. Note that if a comparator contains versions with pre-release labels, it will only match versions with the same major.minor.patch. For example, >=3.1.4-beta.2 matches 3.1.4-beta.3, but does not match 3.1.5-beta.3.
Depend on the type
Dependences Dependences that the code needs to run, such as vue, vue-router.
DevDependences are dependencies that are required during development but not at runtime, such as Babel or WebPack.
PeerDependences, which is used to tell the host environment what dependencies are required and the version range of the dependencies. If the host environment does not have a dependency for the corresponding version, a warning will be reported when the dependency is installed. For example, there are dependencies in the package eslint-plugin-import:
"peerDependencies": {
"eslint": "2.x - 5.x"
},
Copy the code
At install time, the CLI throws a warning if the host environment does not have the 2.x-5.x version of ESLint. But it won’t be installed for us automatically, it still needs to be installed manually.
OptionalDependencies. Yarn considers the dependency installation to be successful even if the installation fails. Optional dependencies are suitable for situations where there is a backup plan even if the optional dependencies are not successfully installed.
BundledDependencies: Bundle dependencies in bundledDependencies: Bundle dependencies in bundledDependencies: Bundle dependencies
The cache
Yarn caches the installed packages. When installing the same packages again, yarn directly copies the packages from the cached files instead of downloading them.
You can run the yarn cache dir command to view the yarn global cache directory. My cache directory is under /Library/Caches/Yarn/v1.
Yarn stores the decompressed packages of invalid versions in different directories
npm-[package name]-[version]-[shasum]`
Copy the code
Named after. Shasum is the dist. Shasum obtained by Registry above.
You can run commands to see which packages have been cached.
Yarn Cache List Lists each cached package. Yarn Cache List --pattern <pattern> Lists the cached packages that match the specified patternCopy the code
For example, run yarn cache list –pattern vue
yarn.lock
Yarn.lock stores the exact version information of each dependent version to ensure the same result when the yarn is installed on different machines.
The following uses @babel/code-frame as an example to see what information is recorded in Yarn.lock.
- The first line
"@ Babel/[email protected]"
The package name and the semantic version number are defined in package.json. version
Field, which records an exact version.resolved
The field records the PACKET URL address. Where the hash value is the preceding onedist.shasum
.dependencies
This field records the dependencies of the current packagepackage.json
的dependencies
Field.
During Yarn installation, only the yarn.lock file (the top-level yarn.lock file) of the current project is used, and any dependent yarn.lock file is ignored. The top-level yarn.lock contains all information about all package versions in the dependency tree to be locked.
The yarn.lock file is automatically generated by YARN and managed by YARN during the installation. Do not manually change or delete the yarn.lock file, and submit the file to the version control system to avoid problems caused by package versions installed on different machines.
Yarn install process
After the yarn install is executed for the first time, the system queries the semantic version in package.json from Registry, obtains the latest dependency packages that match the version rules, downloads them, and builds the dependency tree. For example, specifying the vue version ^2.0.0 in package.json will get the highest version of the package that matches 2.x.x. The yarn.lock file is automatically generated and cached.
Then, run yarn install to check whether the dependent version range in package.json matches the version number in yarn.lock.
- The version number matches, according to
yarn.lock
In theresolved
Field to view the cache, if there is a cache, direct copy, no cache according toresolved
Field to download the package. - The version number does not match, according to
package.json
The version range in theregistry
Query, download the latest package that conforms to the version rules, and update toyarn.lock
In the.
Module flattening
As mentioned above, when a dependency is installed, it is resolved to build a dependency tree. For example, there are three packages A, B, and C in my project’s first layer of dependencies (i.e., dependence and devDependences of the current project, not including dependencies), and package A and B depend on package D of the same version range. So this part of the dependency tree looks like this:
├── A │ ├── D │ ├─ B │ ├── CCopy the code
If you install it directly from this dependency tree, module D will be installed in both A and B’s node_modules, resulting in module redundancy.
To ensure that there are no duplicate modules in the dependency tree, Yarn dedupe is performed during installation. Yarn traverses all nodes and places modules one by one under the root node, that is, node-modules of the current project. When identical modules are found, the current module’s specified semver version range is determined to see if there is an intersection, if so, only the compatible version is retained, if not, it is installed under the current package’s Nodes-modules. In this case, the packages A, B, C, and D are all installed under the first layer of Node-modules.
A. B. C. CCopy the code
If package A and package B depend on incompatible versions, assume package A depends on D@1 and package B depends on D@2. The final installation result is as follows:
├── B │ ├─ D@2 ├── C ├─ D@1Copy the code
When code requires or imports a module, it starts with node-modules in the current package. If not, it starts with node-modules in the previous layer of the current package, so that it finds the global node_modules. Therefore, the above installation tree structure ensures that each package can obtain the required version of the package.
Common yarn command
- Yarn install Installation dependencies
Yarn install/yarn installs all packages listed in the local node_modules package.json directory that depend on yarn install --force to repull all packages, Even if it's already installed (so don't remove Node-modules in the future...) Yarn install --modules-folder <path> Specifies another location for the node_modules directory, Instead of the default./node_modules yarn install --no-lockfile Does not read or generate the yarn.lock file yarn install --production[=true|false] / --production / --prod installs only the dependencies package, not devDependenciesCopy the code
- yarn add
Yarn add package-name Installs latest version. yarn add <package... > Add installation package to dependencies yarn add <package... > [--dev/ -d] Install the package to devDependencies yarn add <package... > [--peer/ -p] use --peer or -p to install the package in peerDependencies yarn add <package... > [--optional/ -o] Use --optional or -o to install the package in optionalDependencies yarn add <package... > [--exact/ -e] Use --exact or -e to install the exact version of the package. The default is the latest version in the major version of the installation package. For example, Yarn add [email protected] accepts version 1.9.1, but Yarn add [email protected] --exact only accepts version 1.2.3. yarn add <package... > [--tilde/ -t] Use --tilde or -t to install the latest version of the minor version of the package. The default is the latest version in the major version of the installation package. For example, yarn add [email protected] -- Tilde will accept 1.2.9, but not 1.3.0.Copy the code
- Yarn config Manages configuration files
Yarn config get <key> View the value of the configuration key. Yarn config list View the current configuration. Yarn config delete <key> Delete the configuration key yarn config from the configurationset< key > < value > [| -- - g global] set configuration items key has a value of valueCopy the code
- Other Common Commands
Yarn list Queries all dependencies of the current working folder. Yarn info <package> [<field>] View package information. You can view specific yarn remove <package... > Remove the name package from the dependency and update your package.json and yarn.lock files. Yarn <script> [<args>] Executes user-defined scriptsCopy the code
- In detailed log mode, parameters are added when the yarn command is run
--verbose
This is very helpful in troubleshooting errors
yarn <command> --verbose
Copy the code
You can print out the details of the execution (creating directories, copying files, or HTTP requests, etc.)
Welcome to follow my public number “front-end xiaoyuan”, I will regularly update the above original articles.