package.json file
The package.json file is actually a description of the project or module package, which contains a lot of meta-information. For example, project name, project version, project execution entry file, project contributors, etc.
Field meanings of package.json
Required fields
There are several fields that the package must fill in, which will be filled in when npm init is executed:
◎ name: project name, required field.
◎ version: project version, required field.
◎ main: entry file.
◎ license: the license that the project adheres to.
◎ scripts: Runnable npm commands.
◎ keywords: keywords.
◎ author: author.
◎ description: Project description.
Use npm init -y to simplify the required operations. The default is yes.
scripts configuration
The scripts configuration is an executable script command that can configure startup projects, test scripts, etc. It is one of the indispensable and important configurations in front-end projects:
"scripts": {
"dev": "node index.js",
"predev": "node preIndex.js",
"postdev": "node postIndex.js"
},
devDependencies、dependencies配置
Dependency package: npm package declaration will be added to dependencies or devDependencies.
Declared in dependencies are the packages necessary for the project in the production environment . Run npm install xxx --save or npm install xxx
devDependencies declare the packages required during the development phase , such as Webpack, ESLint, Babel, etc., to assist development. These packages are not required when packaging and going online, so they must be declared in the appropriate location according to the actual use of the package. Run npm install xxx --save-dev or npm install xxx -D
Babel configuration
You can configure the code conversion of ES6-7 in the project, etc. Most of them are Babel compilation configurations.
"babdel" : {
"presets": ['@babel/preset-env'],
"plugins": [...]
}
Why do the installed dependency versions all have three digits? What does that mean?
The version specification is
XYZ
. The difference between 1.0.0 1.0.0 represents the hard-coded version, this version will definitely be installed when npm install ^1.0.0 represents that if the current package has a newer version, for example, it is now upgraded to 1.1.1, then when npm install It will be automatically installed to version 1.1.1. ~1.0.0 is similar to ^1.0.0. The difference is that ^1.0.0 means X will not change, and YZ will change with the latest version. ~1.0.0 means X and Y remains unchanged, Z saves the latest version
The principle of npm install
package-lock.json file
If you need to use npm install to reload all dependencies when re-npm install or when the node_modules folder does not exist or is deleted, you can directly indicate the download address and related dependencies through package-lock.json, and there is no need to download it from the package. .json analyzes the dependencies of the package one by one, so it will greatly speed up the installation. The purpose of package-lock.json is to ensure that all library packages are exactly the same as the ones you installed last time .
If you want to upgrade the library package in package-lock.json
npm install XXX@xxx
The difference between npm and yarn
What they have in common: yarn and npm are both package management tools. It can be said that yarn is an optimized version of npm.
Differences:
yarn supports parallel installation (fast server speed, resulting in fast download speed), and can perform multiple tasks at the same time, while npm needs to wait for the previous task to be installed before running the next task; yarn supports offline mode installation, if it has already been
installed A package, then reinstalling it with yarn will get it from the cache, and npm will download it from the network; yarn
supports version locking, and installing the package with yarn will have a yarn.lock file to lock the version by default to ensure a unified environment, while npm will download it from the network by default Download the latest and most stable one. (Note: npm can implement version locking through commands. Version locking can solve the problem of version incompatibility between packages, that is: npm install --save package name@version number) yarn
outputs less information when installing packages, and npm outputs verbose information. Remain.
The difference between npm and cnpm
(1) The only difference between the two is the package manager in node.
(2) npm is the official package manager of node. cnpm is a Chinese version of npm. It is a Taobao-customized cnpm (gzip compression support) command line tool that replaces the default npm.
(3) If you cannot use npm to download due to network reasons, then cnpm will come in handy.
Be sure to remember that npm and cnpm only have different download addresses. npm downloads things from abroad, and cnpm downloads things from China.
Use of npx
Example:
Suppose you have a package called my-package and want to execute it.
Well, without npx, to execute a package, it must be done by running it through its local path, like this:
./node_modules/bin/my-package
Or define it as a separate script in the scripts section of the package.json file like this:
{
"name":"something",
"version": "1.0.0",
"scripts": {
"my-package":"./node_modules/bin/my-package"
}
}
Then use npm run my-package to run.
Now, with npx, you can easily do this by just running npx my-package.
Example 2:
A package installed in nodemodules is also installed globally. Execute xxx --version in the current directory and find that the global version is found. To get the version in the current nodemodules, execute npx xxx --version. get.
Use of pnpm
Previous situation: There are more than a dozen projects on a computer, but none of the previous package management tools can solve a problem, that is, if these dozen projects are all Vue, they will all reference a Vue package, and Exists independently, which will cause the computer memory to be too large.
Biggest advantage: Fast, disk-space-saving package management tool.
What exactly does pnpm do?
1. When using npm or yarn, if you have 100 projects, and all projects have the same dependency package, then you need to save 100 copies of the same dependency package on the hard disk.
2. If you use pnpm, the dependent packages will be stored in a unified location. Therefore:
if you use the same version for the same dependent package, then there will only be one file of the dependent package on the disk;
if you need the same dependent package When using different versions, only the files that differ between versions will be stored;
all files are saved in a unified location on the hard disk:
when the software package is installed, all the files it contains will be hard linked to this location instead of Will take up extra hard drive space;
this allows you to easily share the same version of dependency packages between projects.
The concept of soft connection and hard connection
A soft link is a type of reference, such as a shortcut. This shortcut saves a path. If the original file is deleted, all symbolic links pointing to it will be destroyed. A hard link is a
unit that actually points to the data. When moved Or when the original file is deleted, the hard link will not be destroyed because it refers to the physical data of the file rather than the file's location in the file structure.
The principle of pnpm
If you are using pnpm, dependent packages will be stored in a unified location on the hard disk.
When a software package is installed, all the files it contains will be hard-linked to this location without taking up additional hard drive space ;
this allows you to easily share the same version of dependent packages between projects; a
soft link will also be established. to node Modules
pnpm creates non-flattened node Modules
■When using npm or Yarn to install dependency packages, all software packages will be promoted to the root directory of node_modules, which is flattened. As a result, the source code can
access dependency packages that are not set by the current project;
pnpm creates non-flat node Modules as shown above, in which redundant dependency packages will not be displayed.
Command equivalent to npm
The disadvantage of pnpm is that as time changes and the number of projects increases, the pnpm store folder becomes larger and larger.