Ask yourself a few more whys every day, and you will always get unexpected results. The growth path of a rookie Xiaobai (copyer)
Excerpted from teacher coderwhy
package management tool npm
Introduction:
npm: Node package Manager aka:node包管理器.- Npm is a management tool of node, so you need to install Node first.
- Packages managed by npm https://www.npmjs.org/
Package storage address managed by npm:
- Publishing your own package is publishing to
registry - The installed package is re-
registrydownloaded
npm config file ( package.json)
For a project, many npm packages are needed, so a configuration file is needed to manage them.
- The configuration file will record your
项目的名称,版本号,项目描述etc. - It also records all dependencies of the project
其他库的信息and依赖库的版本号
Get the configuration file (package.json)
- Method 1: Manually create a project from scratch
npm init [-y] - Method 2: Create a project through scaffolding, the scaffolding will help us produce
package.json, and there are related configurations in it
Note: in the configuration file
name不能为中文
common attributes
Mandatory properties: name,version
- name is the name of the project
- version is the version number of the current project
- description is the description information (simple description of the project)
- author The basic information of the author (used when publishing)
- license is an open source protocol (used when publishing)
private属性
- The private attribute records whether the current project is private
- When
trueit is , npm cannot publish it, this is the way to prevent private projects or modules from being published
main属性
Set the entry of the program, when installing the module, know the entry file of the module
scripts属性
- The scripts attribute is used to configure some script commands, which
键值对exist in the form of - After configuration, you can
npm run [key]execute this command by npm startandnpm run startthe difference between:- equivalent
- For commonly used
start,test,stop,restartyou can directly omit run and run directly through npm start , etc.
dependenices属性
dependencies属性Is to specify the package that needs to depend on whether开发环境or not生产环境- such as
vue、vuex、react、react-domwait
devDependencies属性
- Some packages
生产环境are not needed, such as webpack, babel, etc. - At this time we will pass
npm install webpck --sase-devand install itdevDependencies属性into
peerDependencies属性
- The project dependency is a peer-to-peer relationship, that is, a package you depend on, which must be based on another host package
- For example
element-plus, is dependent onvue3,antdis dependent onreact，react-dom - When installing element-plus, you must also install vue3
Dependency version management
During the installation process, in the configuration file, you will find ^2.0.3or ~2.0.3, what does this mean?
npm packages usually need to follow semverthe version specification
- semver: https://semver.org/lang/zh-CN
- npm semver: https://docs.npmjs.com/misc/semver
The semver version specification isX.Y.Z
- X Major version number (major): The difference between when you make an incompatible API modification (may not be compatible with the previous version)
vue2andvue3 - Y minor version number (minor): When you do a backward compatible functional addition (new features are added, but compatible with previous versions)
- Z revision number (patch): When you do a backward compatible problem fix (no new features, fixes bugs in previous versions)
^and ~the difference
^x.y.z: Indicates that x remains unchanged, y and z are always the latest version installed~x.y.z: Indicates that x and y remain unchanged, and z always installs the latest version
npm install command
There are two types of npm packages installed:
- Global install (global install):
npm install webpack -g - Partial installation (local install):
npm install webpack
Global installation : only for toolkit subclasses, not for use in all projects
Partial installation : it is used for the current project
project installation
Depends on development
npm install axios is equivalent to npm install axios --save is equivalent to npm install axios -S
Depends on production
npm install webpack --save-dev is equivalent to npm install webpack -D
The principle of npm install
- Execute npm install and he helped us complete the above operation behind the scenes?
- You will also find a generated
package-lock.jsonfile, what is its function - Starting from npm5, npm supports caching strategies. What is the role of caching?
First look at a picture (made by coderwhy)
Looking at the picture above, it is divided into two situations, whether there are package-lock.jsonfiles
情况一：没有lock文件
npm installWhen executing ,
It will first check the dependencies between each package to form a dependency graph.
Then from registrythe warehouse, download the compressed package, add it to 本地的缓存,
Then it will compress to node_modules,
package-lock.jsonFiles are also generated .
The installation is complete.
情况二： 有lock文件
There is a lock file,
First check the version number of the package, and then check the dependencies between the packages to form a dependency graph
View the consistency of the dependent graph:
-
Inconsistency : It will directly go to the registry warehouse to re-download, then update the local cache, and also generate a new lock file.
-
Consistent : It will go to the cache file of the version to find, get the compressed package, compress it into node_modules, and complete the installation.
View locally cached repositories
npm get cache
// 会获取到本地的仓库的路径
Then click in, _cacachethe folder,
There is an encrypted index value in the lock file, and then it is to find the index value of the compressed package in the index file, and then go to the content to find the index value of the compressed package.
clear cache
npm cache clean
yarn tools
-
yarn is a new JS package management tool jointly launched by Facebook, Google, Exponent and Tilde;
-
The appearance is mainly to solve the shortcomings of npm
-
npm is gradually optimizing in npm5
-
Yarn also has a lock file, that is
yarn.lock
Comparison of npm commands and yarn commands
It is not recommended to use both yarn and npm in a project, package-lock.jsonand yarn.lockthere are some differences.
cnpmtools
The repository of the registry is located abroad, so sometimes when we download it, it will be very slow, and it may even fail to download, so we need to set up the mirror image provided by China (about 10 minutes, update once)
// 查看仓库地址
npm config get registry
//设置仓库地址
npm config set registry https://registry.npm.taobao.org
However, the address of the npm tool warehouse is foreign, so you need to use a tool to set the domestic address
npm install -g cnpm
cnpm config get registry // 查看
cnpm config set registry // 设置
npm install -g cnpm --registry=https://registry.npm.taobao.org
npxtools
npx is a command that comes with npm5.2.
- npx has many functions, but it is more common to use it to call the
某个模块的命令
Example:
Install webpack 5.xx globally
Install webpack 3.xx locally
webpack --versionWhich version is used if executed in the terminal ?
- It will display webpack5.xx, which is global
- When webpack cannot be found in the current directory, it will go to
电脑的环境变量find it and execute
Execution of local commands
Method 1 : Use the command in the terminal (in the root directory of the project)
./node_modules/.bin/webpack --version
Method 2 : Modify scripts in package.json
"scripts": {
"webpack": "webpack --version"
}
Method 3: Use npx
npx webpack --version
The principle of npx is very simple, it will node_modules/.binfind the corresponding command in the directory of the current directory
npm publishes its own package
-
Register npm account
-
Enter the name in the terminal
npm loginYou need to fill in the user name and password
-
Modification
package.json, that is, the version number (if the version number is not modified, it is not supported (overwrite the previous version), and an error will be reported) -
Publish to npm registry
npm publish -
update warehouse
- Modify the version number (preferably conform to the semver specification)
- Republish
-
remove published packages
npm unpublish -
Publish outdated packages
npm deprecarte