Article directory
Why use npm? What can it bring us?
With the emergence of more and more new technologies, when we need to reference js libraries or frameworks in our projects, it takes a lot of time and energy to open the official website to download files and put them into the project, which is very inefficient. Whether it is developing vue, react or small programs, libraries and frameworks can now be referenced and managed through npm, which greatly improves development efficiency and reduces the risk of errors.
What is npm?
NPM is the Node.js package manager used to install various Node.js extensions. Now its ability is javascript package management, because it is not only available on node.js projects, but almost all modern front-end development projects can be used, through which we can manage and reference existing dependency packages in the project, that is, other development Code shared by people.
How to use npm?
1. Whether the installation and testing is successful
Usually, we install npm synchronously by installing node.js. The detection method is to enter in the terminal:
$ npm -v
# 输出
8.19.2
If there is an output version number, it means that npm has been installed on your computer.
Otherwise, if it is output command not found: npm, enter the following command again to check whether node.js has been installed:
$ node -v
# 输出
v18.12.0
If the version number is not output, please install node.js yourself first.
2. Switch mirror source
Due to network reasons, our access to the default npm source is very slow, so we switched to the domestic taobao source.
change configuration command
$ npm config set registry=https://registry.npm.taobao.org/
view current source
$ npm config get registry
# 输出
https://registry.npm.taobao.org/
# 也可以切换回默认源
$ npm config set registry https://registry.npmjs.org
3. Generate package.json
The package.json file records the package name, version, description, entry file, warehouse address, script execution command, dependencies, development dependencies, copyright statement and other information.
Let's create a directory hello-npm for demonstration. Execute the npm init command and there will be some options for us to choose and fill in. Those with default values can be modified or directly enter the next item; npm init -y will not ask , it will generate the package.json file directly in the directory.
$ mkdir hello-npm
$ cd hello-npm
# 逐项配置
$ npm init
# 静默配置
$ npm init -y
4. Install dependencies
That is to download the package, download the required library and framework files into the project. Example download request library axios
# 安装axios，但不把依赖记录到package.json
$ npm i axios
# 安装axios, 并在package.json中记录依赖 dependencies
$ npm i axios -S
# 安装webpack，并在package.json中记录开发依赖 devDependencies
$ npm i webpack -D
# 全局安装 yarn
$ npm i yarn -g
Among them, i is the abbreviation of install, -S is the abbreviation of --save, -D is the abbreviation of --save-dev, and -g means that it is installed in the global environment, and the command can be executed in any directory after installation.
# 不使用缩写的写法，效果同上
$ npm install aixos --save
$ npm install webpack --save-dev
$ npm install yarn --global
Another command is to install all dependencies declared in package.json
$ npm i
That is, without any parameters after npm i, all dependencies in package.json will be executed, which is very useful when initializing the project, avoiding installing dependencies one by one.
5. Uninstall dependencies
# 移除依赖，但不删除package.json中的该依赖项
$ npm uninstall axios
# 移除依赖，并删除package.json中的该依赖项
$ npm uninstall axios -S
# 移除依赖，并删除package.json中的该开发依赖项
$ npm uninstall webpack -D
# 移除全局依赖
$ npm uninstall yarn -g
6. Execute the commands declared in scripts
We add a command test to the scripts field in package.json
"scripts": {
"test": "echo \"hello\""
}
Execute in terminal
$ npm run test
# 输出
hello
In actual development, this scripts is a very useful configuration item.
For example, if you are developing a vue application, the most commonly used one is npm run serve to start the vue project.
# 启动开发环境
$ npm run serve
# 构建生产版本
$ npm run build
We open the package.json under the vue project created by vue-cli3, and you can see the following configuration information. So when we execute the above command, we actually run the command declared here.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
7. Summary
Knowing about installing packages, uninstalling packages, and executing script commands is basically enough for development.
Next, let's see if we have developed a great package and want to share it with more people, what should we do?
Publish your own package
1. Export the module in the entry file
In the entry file specified by main in package.json (default is index.js), export the module you developed.
// index.js
exports.printMsg = function() {
console.log("A message from the demo package");
}
2. Register an account at npmjs.com
Open npmjs.com , click sign up, and enter the user name, email, and password on the page to register.
3. Log in to the npm account on the terminal
Note that the source must be switched back to the npm official source first. Then follow the prompts to enter the user name, password, otp is a one-time password, and it will be sent to your mailbox.
$ npm config set registry https://registry.npmjs.org
$ npm login
# 输出，说明登录成功
Logged in as <username> on https://registry.npmjs.org/.
4. Execute the release
After successful login, execute the release command in the project directory
$ npm publish
# 输出
...
npm notice Publishing to https://registry.npmjs.org/
+ [email protected]
You can also use the npm view <package name> command to view, <package name> is the name written in package.json. You can see information about published packages.
You can also see the packages you publish on npmjs.com through your browser.
If it is similar or the same as the name of an existing project on npm, it is not allowed to publish. At this time, you can modify the name field in package.json according to the prompt and try to publish again.
5. Use self-published packages
Return to the upper layer of the project to create a directory, or install your own package in a directory outside the project.
$ cd ..
# 新建一个目录
$ mkdir use-example
# 打开目录
$ cd use-example
# 添加package.json
$ npm init -y
# 安装刚刚发布的包
$ npm i create-captcha -S
Create a new file in the project and reference the module.
// index.js
const createCaptcha = require("create-captcha");
console.log(createCaptcha.version);
createCaptcha.test();
Execute the file with node.js
$ node index.js
# 输出
v0.0.1
570736
648575
428696
909049
870945
755695
525637
705223
253521
549539
The function of the module is normal, indicating that the module has passed the verification. At this time, we can start promoting our own packages.
update maintenance package
npm version <update_type>
The value of <update_type> is a semantic release type value: patch, minor, or major
corresponds to patching (minor update), minor version (minor update), and major version (major update).
$ npm version patch
# 输出, 可以看到自动把版本号最后一个数字自动变为2了
v0.0.2
# 需要执行 publish 才会更新到线上包
$ npm publish
Note: npm version patchThe package will not be released directly, and it needs to be executed again npm publishto update the online package!
If we need to update the project that references the package, execute
$ npm update create-captcha
At this point, you can have a clear understanding of the use of npm and the release and management of your own packages.
For more details, you can view the official github and Chinese documents.
github address https://github.com/npm/cli
npm Chinese documentation