Npm-related npm initialization, switching npm mirror source, package.json interpretation, require loading mechanism & ES6 downgrade processing - babel package
1. npm-related
1.1 What has been learned
npm (node package manager) is a node package manager, we have learned to install and uninstall packages before,** the first timelocal**Installation needs to be initialized first.
initialization:
npm init -y
npm init --yes
npm init
Global installation:
The global installation is generally a command. After the global installation, this command can be used in any folder.
Things installed globally cannot be loaded by require。
# 安装命令
npm i 包名 -g
npm install 包名 -g
# 卸载命令
npm un 包名 -g
npm uninstall 包名 -g
Local installation:
# 安装命令
npm i 包名
npm install 包名
# 卸载命令
npm un 包名
npm uninstall 包名
1.2 Supplement on installing third-party packages
-
Install third-party packages
# 老版本的node安装,后面加 --save,是为了把安装的第三方模块在package.json中做记录,新版不用 npm install 包名 --save # 正常的安装 npm install 包名 # 一次安装多个包,名字之间用空格隔开 npm install 包名1 包名2 包名3 npm i express mysql art-template # 指定包的版本进行安装 npm install 包名@版本号 # 简写 npm i 包名
-
Install packages from the cache directory
# 查看缓存目录 npm config get cache # 从缓存目录下载包 # --cache-min 后面跟的是时间,单位是分钟,超过这个时间才去服务器下载 npm install 包名 --cache-min 9999999
-
View the global installation directory
# 查看全局安装时的安装目录 npm root -g
1.3 Switch npm mirror source
-
The server where npm stores package files is abroad, and the speed is very slow, so we need to solve this problem.
-
The domestic Taobao development team has made a backup of npm in China, and the URL is: http://npm.taobao.org/.
# 查看当前的源 npm config ls # 在上面命令的结果有,有下面一行,该行记录的网站就是我们安装第三方模块的网站 # registry = "https://registry.npmjs.org/" # 下载包的时候切换源 npm install express --registry=https://registry.npm.taobao.org # 全局设置 npm config set registry https://registry.npm.taobao.org # 原始的路径 # https://registry.npmjs.org/ # nrm 是管理镜像源的模块,通过nrm来管理镜像源 npm i nrm # 自行查询如何使用
1.4 package.json
After initialization, a package.json file will be generated
-
create
package.json
npm init npm init -y
-
main
The main field specifies the loaded entry file
-
dependencies dependencies (plural)
- Specifies the packages that the current project depends on (requires)
- Software version number [email protected]
- Major version. Minor version. Minor version
- Minor version : When the project undergoes partial modification or bug correction, the revised version number will be increased by 1
- Minor version : When the project adds some functions on the original basis, the main version number remains unchanged, and the sub-version number is increased by 1
- Major version : When the project undergoes major revisions or accumulates a lot of partial corrections, resulting in global changes to the project as a whole, the major version number will be incremented by 1
"dependencies": { "art-template": "^4.14.2", "body-parser": "^1.18.3", "express": "^4.16.4", "express-art-template": "^1.0.1" }
dependencies
The field specifies the modules that the project depends on to runnpm install
All dependencies can be installed using- Each member of the object consists of the module name and the corresponding version requirements, indicating the dependent modules and their version range.
- Specified version : For example
1.2.2
, following the format of "major version. Minor version. Minor version", only the specified version will be installed during installation. - Tilde (tilde) + specified version : For example
~1.2.2
, it means to install the latest version of 1.2.x (not lower than 1.2.2), but not to install 1.3.x, which means that the major version number and minor version number will not be changed during installation . - Caret (caret) + specified version : For example, ˆ1.2.2 means to install the latest version of 1.xx (not lower than 1.2.2), but not to install 2.xx
- Specified version : For example
-
scripts
scripts
Specifies the npm command line abbreviation for running script commands, for example, start specifiesnpm run start
the command to be executed when running."scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js", "t": "dir c:\\" }
run
scripts
npm run t npm run start # 只有 start 可以简化调用 npm start
The role of dependence:
- Document the required packages for the project
- When sending to others, there is no need to send relatively large
node_modules
folders . Just sendpackage.json
it , you just need to executenpm install
to install all the packages
custom command
1.5 A mysterious folder node_modules
-
When we download a third-party package, we will automatically put the downloaded third-party package
node_modules
in . directly when using third-party packagesrequire('第三方包的名字')
. -
The package we wrote ourselves can also be placed in this folder, just write the package name directly when loading .
-
require
load order of-
print module object
-
The process of package loading,
module.paths
according the path in the search step by step
-
require()
After loading for the first time , the module/package will be cached , and loaded directly from the cache therequire()
next time.
1.6 require loading mechanism
require
Prioritize loading of modules in the cache- If there is no module in the cache, the core module (modules that come with node, such as fs, path, http) will be loaded first , and cached
- If there is a relative path , the file module is loaded according to the path and cached
require('./main')
When the extension is omitted- Load first
main.js
, if not load againmain.json
, if not load againmain.node
(module written in c/c++)
- If it is not a file module or a core module, load a third-party module (a module installed by npm)
- node will look in the node_modules directory (find the directory with the same name as you quoted), for example here
require('moment')
- If
moment
a directory , the module is loaded and cached - If the process cannot be found, node will find
node_modules
the directory , the rules are the same as above - If the root path of the code file has been found and cannot be found, an error will be reported
example
1. Install in npm empty folder
npm init # 初始化,生成package.json文件和 node_modules 目录文件夹
2. In the node_modules file directory, a folder is a package file
3. Print package file data in app.js
app.js original file
npm/app.js
// 它会去node_modules/mysql里面找index.js ,因为package.json中规定了入口文件是index.js
const mysql = require('mysql');
const db = require('./db');
// 导入自己的文件模块
// const db = require('db'); // 不加 ./ 就会报错
// console.log(db.aa);
// const aaaa = require('aaaa');
// console.log(aaaa.abcd);
npm/db.js
module.exports = {
aa: 123
}
npm/package.json
{
"name": "abcd",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"abc": "node app.js",
"qh": "npm config set registry https://registry.npm.taobao.org",
"start": "node app.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^2.2.4",
"mysql": "^2.17.1"
}
}
2. ES6 downgrade processing
Because ES 6 has browser compatibility issues, some tools can be used for downgrade processing, such as: babel
-
Steps to downgrade the use of babel
- Install Node.js
- Install babel on the command line
- configuration file
.babelrc
- run
-
Project initialization (the project folder cannot have Chinese)
npm init -y
-
On the command line, install babel babel official website
npm install @babel/core @babel/cli @babel/preset-env
-
Configuration file
.babelrc
(create this file manually)babel's downgrade configuration
{ "presets": ["@babel/preset-env"] }
-
From the command line, run
# 把转换的结果输出到指定的文件 npx babel index.js -o test.js # 把转换的结果输出到指定的目录 npx babel 包含有js的原目录 -d 转换后的新目录
Example 1 - Converting a file
the code
1. File 1.js before conversion
let fn = x => x * x;
let a = 11;
let b = 22;
let c = {
a,
b
}
2. Conversion command
npx babel 1.js -o 2.js
3. Newly generated file 2.js after conversion
"use strict";
var fn = function fn(x) {
return x * x;
};
var a = 11;
var b = 22;
var c = {
a: a,
b: b
};
Example 2 - Convert Folder
the code
1. The contents of the a.js file and b.js file in the original js folder are as follows
let fn = x => x * x;
let a = 11;
let b = 22;
let c = {
a,
b
}
2. Convert folder command
npx babel js -d js1
3. Convert the newly generated js1 folder
The contents of the a.js and b.js files in the js1 folder are as follows
"use strict";
var fn = function fn(x) {
return x * x;
};
var a = 11;
var b = 22;
var c = {
a: a,
b: b
};