一、学习内容

为框架学习打下基础

二、Node.js注意事项:

不能使用浏览器的api

进程和线程概念

三、Buffer

Buffer(缓冲器)

一、 概念

Buffer 是一个类似于数组的 对象 ,用于表示固定长度的字节序列

Buffer 本质是一段内存空间,专门用来处理 二进制数据 。

二、 特点

  1. Buffer 大小固定且无法调整

  2. Buffer 性能较好,可以直接对计算机内存进行操作

  3. 每个元素的大小为 1 字节(byte)

**三、 **使用

3-1. 创建 Buffer

Node.js 中创建 Buffer 的方式主要如下几种:

  1. Buffer.alloc

    1
    2
    //创建了一个长度为 10 字节的 Buffer,相当于申请了 10 字节的内存空间,每个字节的值为 0
    let buf_1 = Buffer.alloc(10); // 结果为 <Buffer 00 00 00 00 00 00 00 00 00 00>
  2. Buffer.allocUnsafe

    1
    2
    3
    //创建了一个长度为 10 字节的 Buffer,buffer 中可能存在旧的数据, 可能会影响执行结果,所以叫
    unsafe
    let buf_2 = Buffer.allocUnsafe(10);
  3. Buffer.from

    1
    2
    3
    4
    //通过字符串创建 Buffer
    let buf_3 = Buffer.from('hello');
    //通过数组创建 Buffer
    let buf_4 = Buffer.from([105, 108, 111, 118, 101, 121, 111, 117]);

3-2. Buffer 与字符串的转化

我们可以借助 toString 方法将 Buffer 转为字符串

1
2
let buf_4 = Buffer.from([105, 108, 111, 118, 101, 121, 111, 117]);
console.log(buf_4.toString())

toString 默认是按照 utf-8 编码方式进行转换的。

3-3 Buffer 的读写

Buffer 可以直接通过 [] 的方式对数据进行处理。

1
2
3
4
5
6
//读取
console.log(buf_3[1]);
//修改
buf_3[1] = 97;
//查看字符串结果
console.log(buf_3.toString());

注意:

  1. 如果修改的数值超过 255 ,则超过 8 位数据会被舍弃
  2. 一个 utf-8 的字符 一般 占 3 个字节

四、fs模块

fs 全称为 file system ,称之为 文件系统 ,是 Node.js 中的 内置模块 ,可以对计算机中的磁盘进行操作。

本章节会介绍如下几个操作:

  1. 文件写入
  2. 文件读取
  3. 文件移动与重命名
  4. 文件删除
  5. 文件夹操作
  6. 查看资源状态

一、文件写入

文件写入就是将 数据 保存到 文件 中,我们可以使用如下几个方法来实现该效果

writeFile 异步写入

语法: fs.writeFile(file, data[, options], callback)

参数说明:

  • file 文件名
  • data 待写入的数据
  • options 选项设置 (可选)
  • callback 写入回调

返回值: undefined

1
2
3
4
5
6
7
8
9
10
11
// require 是 Node.js 环境中的'全局'变量,用来导入模块
const fs = require('fs');
//将 『三人行,必有我师焉。』 写入到当前文件夹下的『座右铭.txt』文件中
fs.writeFile('./座右铭.txt', '三人行,必有我师焉。', err => {
//如果写入失败,则回调函数调用时,会传入错误对象,如写入成功,会传入 null
if(err){
console.log(err);
return;
}
console.log('写入成功');
});

writeFileSync 同步写入

语法: fs.writeFileSync(file, data[, options])

参数与 fs.writeFile 大体一致,只是没有 callback 参数

返回值: undefined

代码示例:

1
2
3
4
5
try{
fs.writeFileSync('./座右铭.txt', '三人行,必有我师焉。');
}catch(e){
console.log(e);
}

Node.js 中的磁盘操作是由其他 线程 完成的,结果的处理有两种模式:

同步处理 JavaScript 主线程 会等待 其他线程的执行结果,然后再继续执行主线程的代码,效率较低

异步处理 JavaScript 主线程 不会等待 其他线程的执行结果,直接执行后续的主线程代码,效率较好

appendFile / appendFileSync 追加写入

appendFile 作用是在文件尾部追加内容,appendFile 语法与 writeFile 语法完全相同

语法:

fs.appendFile(file, data[, options], callback)

fs.appendFileSync(file, data[, options])

返回值: 二者都为 undefined

1
2
3
4
5
fs.appendFile('./座右铭.txt','择其善者而从之,其不善者而改之。', err => {
if(err) throw err;
console.log('追加成功')
});
fs.appendFileSync('./座右铭.txt','\r\n温故而知新, 可以为师矣');

createWriteStream 流式写入

语法: fs.createWriteStream(path[, options])

参数说明:

  • path 文件路径
  • options 选项配置( 可选 )

返回值: Object

1
2
3
4
5
6
let ws = fs.createWriteStream('./观书有感.txt');
ws.write('半亩方塘一鉴开\r\n');
ws.write('天光云影共徘徊\r\n');
ws.write('问渠那得清如许\r\n');
ws.write('为有源头活水来\r\n');
ws.end();

程序打开一个文件是需要消耗资源的 ,流式写入可以减少打开关闭文件的次数。

流式写入方式适用于 大文件写入或者频繁写入 的场景, writeFile 适合于 写入频率较低的场景

写入文件的场景

文件写入 在计算机中是一个非常常见的操作,下面的场景都用到了文件写入

  • 下载文件
  • 安装软件
  • 保存程序日志,如 Git
  • 编辑器保存文件
  • 视频录制

当 需要持久化保存数据 的时候,应该想到 文件

二、文件读取

文件读取顾名思义,就是通过程序从文件中取出其中的数据,我们可以使用如下几种方式:

readFile 异步读取

语法: fs.readFile(path[, options], callback)

参数说明:

  • path 文件路径
  • options 选项配置
  • callback 回调函数

返回值: undefined

代码示例:

1
2
3
4
5
6
7
8
9
10
//导入 fs 模块
const fs = require('fs');
fs.readFile('./座右铭.txt', (err, data) => {
if(err) throw err;
console.log(data);
});
fs.readFile('./座右铭.txt', 'utf-8',(err, data) => {
if(err) throw err;
console.log(data);
});

readFileSync 同步读取

语法: fs.readFileSync(path[, options])

参数说明:

  • path 文件路径
  • options 选项配置

返回值: string | Buffer

代码示例

1
2
let data = fs.readFileSync('./座右铭.txt');
let data2 = fs.readFileSync('./座右铭.txt', 'utf-8');

createReadStream 流式读取

语法: fs.createReadStream(path[, options])

参数说明:

  • path 文件路径
  • options 选项配置( 可选 )

返回值: Object

代码示例:

1
2
3
4
5
6
7
8
9
10
11
//创建读取流对象
let rs = fs.createReadStream('./观书有感.txt');
//每次取出 64k 数据后执行一次 data 回调
rs.on('data', data => {
console.log(data);
console.log(data.length);
});
//读取完毕后, 执行 end 回调
rs.on('end', () => {
console.log('读取完成')
})

读取文件应用场景

  • 电脑开机
  • 程序运行
  • 编辑器打开文件
  • 查看图片
  • 播放视频
  • 播放音乐
  • Git 查看日志
  • 上传文件
  • 查看聊天记录

三、文件移动与重命名

在 Node.js 中,我们可以使用 rename 或 renameSync 来移动或重命名 文件或文件夹

fs.rename(oldPath, newPath, callback)

fs.renameSync(oldPath, newPath)

参数说明:

  • oldPath 文件当前的路径
  • newPath 文件新的路径
  • callback 操作后的回调

代码示例:

1
2
3
4
5
fs.rename('./观书有感.txt', './论语/观书有感.txt', (err) =>{
if(err) throw err;
console.log('移动完成')
});
fs.renameSync('./座右铭.txt', './论语/我的座右铭.txt');

四、文件删除

在 Node.js 中,我们可以使用 unlink 或 unlinkSync 来删除文件

fs.unlink(path, callback)

fs.unlinkSync(path)

参数说明:

  • path 文件路径
  • callback 操作后的回调

代码示例:

1
2
3
4
5
6
const fs = require('fs');
fs.unlink('./test.txt', err => {
if(err) throw err;
console.log('删除成功');
});
fs.unlinkSync('./test2.txt');

五、文件夹操作

借助 Node.js 的能力,我们可以对文件夹进行 创建 、 读取 、 删除 等操作

mkdir 创建文件夹

在 Node.js 中,我们可以使用 mkdir 或 mkdirSync 来创建文件夹

fs.mkdir(path[, options], callback)

fs.mkdirSync(path[, options])

参数说明:

  • path 文件夹路径
  • options 选项配置( 可选 )
  • callback 操作后的回调

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
//异步创建文件夹
fs.mkdir('./page', err => {
if(err) throw err;
console.log('创建成功');
});
//递归异步创建
fs.mkdir('./1/2/3', {recursive: true}, err => {
if(err) throw err;
console.log('递归创建成功');
});
//递归同步创建文件夹
fs.mkdirSync('./x/y/z', {recursive: true});

readdir 读取文件夹

在 Node.js 中,我们可以使用 readdir 或 readdirSync 来读取文件夹

fs.readdir(path[, options], callback)

fs.readdirSync(path[, options])

参数说明:

  • path 文件夹路径
  • options 选项配置( 可选 )
  • callback 操作后的回调

示例代码:

1
2
3
4
5
6
7
8
//异步读取
fs.readdir('./论语', (err, data) => {
if(err) throw err;
console.log(data);
});
//同步读取
let data = fs.readdirSync('./论语');
console.log(data)

rmdir 删除文件夹

在 Node.js 中,我们可以使用 rmdir 或 rmdirSync 来删除文件夹

fs.rmdir(path[, options], callback)

fs.rmdirSync(path[, options])

参数说明:

  • path 文件夹路径
  • options 选项配置( 可选 )
  • callback 操作后的回调

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//异步删除文件夹
fs.rmdir('./page', err => {
if(err) throw err;
console.log('删除成功');
});
//异步递归删除文件夹
fs.rmdir('./1', {recursive: true}, err => {
if(err) {
console.log(err);
}
console.log('递归删除')
});
//同步递归删除文件夹
fs.rmdirSync('./x', {recursive: true})

查看资源状态

在 Node.js 中,我们可以使用 stat 或 statSync 来查看资源的详细信息

fs.stat(path[, options], callback)

fs.statSync(path[, options])

参数说明:

  • path 文件夹路径
  • options 选项配置( 可选 )
  • callback 操作后的回调

示例代码:

1
2
3
4
5
6
7
//异步获取状态
fs.stat('./data.txt', (err, data) => {
if(err) throw err;
console.log(data);
});
//同步获取状态
let data = fs.statSync('./data.txt');
1
2
3
4
5
6
7
结果值对象结构:
size 文件体积
birthtime 创建时间
mtime 最后修改时间
isFile 检测是否为文件
isDirectory 检测是否为文件夹
....

六、相对路径问题

fs 模块对资源进行操作时,路径的写法有两种:

  • 相对路径
    • ./座右铭.txt 当前目录下的座右铭.txt
    • 座右铭.txt 等效于上面的写法
    • ../座右铭.txt 当前目录的上一级目录中的座右铭.txt
  • 绝对路径
    • D:/Program Files windows 系统下的绝对路径
    • /usr/bin Linux 系统下的绝对路径

相对路径中所谓的 当前目录 ,指的是 命令行的工作目录 ,而并非是文件的所在目录

所以当命令行的工作目录与文件所在目录不一致时,会出现一些 BUG

八、__dirname

__dirname 与 require 类似,都是 Node.js 环境中的’全局’变量

__dirname 保存着 当前文件所在目录的绝对路径 ,可以使用 __dirname 与文件名拼接成绝对路径

代码示例:

1
2
let data = fs.readFileSync(__dirname + '/data.txt');
console.log(data);

使用 fs 模块的时候,尽量使用 __dirname 将路径转化为绝对路径,这样可以避免相对路径产生的Bug

五、path模块

一、API

path 模块提供了 操作路径 的功能,我们将介绍如下几个较为常用的几个 API:

代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const path = require('path');
//获取路径分隔符
console.log(path.sep);
//拼接绝对路径
console.log(path.resolve(__dirname, 'test'));
//解析路径
let pathname = 'D:/program file/nodejs/node.exe';
console.log(path.parse(pathname));
//获取路径基础名称
console.log(path.basename(pathname))
//获取路径的目录名
console.log(path.dirname(pathname));
//获取路径的扩展名
console.log(path.extname(pathname));

六、http模块

一、概念

HTTP(hypertext transport protocol)协议;中文叫超文本传输协议,是一种基于TCP/IP的应用层通信协议

这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。

协议中主要规定了两个方面的内容

  • 客户端:用来向服务器发送数据,可以被称之为请求报文

  • 服务端:向客户端返回数据,可以被称之为响应报文

  • 报文:可以简单理解为就是一堆字符串

二、请求报文的组成

  • 请求行
  • 请求头
  • 空行
  • 请求体

三、HTTP 的请求行

四、HTTP请求头

格式:『头名:头值』

常见的请求头有:

五、HTTP的请求体

请求体内容的格式是非常灵活的,

(可以是空)==> GET请求,

(也可以是字符串,还可以是JSON)===> POST请求

例如:

  • 字符串:keywords=手机&price=2000
  • JSON:{“keywords”:”手机”,”price”:2000}

六、响应报文的组成

  • 响应行

    HTTP/1.1 200 OK

    ​ 响应状态码和响应字符串关系是一一对应的。

  • 响应头

  • 空行

  • 响应体

​ 响应体内容的类型是非常灵活的,常见的类型有 HTML、CSS、JS、图片、JSON

七、创建 HTTP 服务

使用 nodejs 创建 HTTP 服务

7.1 操作步骤

1
2
3
4
5
6
7
8
9
10
11
12
//1. 导入 http 模块
const http = require('http');
//2. 创建服务对象 create 创建 server 服务
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
response.end('Hello HTTP server');
});
//3. 监听端口, 启动服务
server.listen(9000, () => {
console.log('服务已经启动, 端口 9000 监听中...');
});

http.createServer 里的回调函数的执行时机: 当接收到 HTTP 请求的时候,就会执行

7.2 测试

浏览器请求对应端口

1
http://127.0.0.1:9000

7.3 注意事项

  1. 命令行 ctrl + c 停止服务
  2. 当服务启动后,更新代码 必须重启服务才能生效
  3. 响应内容中文乱码的解决办法
1
response.setHeader('content-type','text/html;charset=utf-8');
  1. 端口号被占用
1
Error: listen EADDRINUSE: address already in use :::9000

​ 1)关闭当前正在运行监听端口的服务 ( 使用较多 )

​ 2)修改其他端口号

  1. HTTP 协议默认端口是 80 。HTTPS 协议的默认端口是 443, HTTP 服务开发常用端口有 3000,

8080,8090,9000 等

如果端口被其他程序占用,可以使用 资源监视器 找到占用端口的程序,然后使用 任务管理器 关闭对应的程序

八、浏览器查看 HTTP 报文

九、获取 HTTP 请求报文

想要获取请求的数据,需要通过 request 对象

注意事项:

  1. request.url 只能获取路径以及查询字符串,无法获取 URL 中的域名以及协议的内容
  2. request.headers 将请求信息转化成一个对象,并将属性名都转化成了『小写』
  3. 关于路径:如果访问网站的时候,只填写了 IP 地址或者是域名信息,此时请求的路径为『 / 』
  4. 关于 favicon.ico:这个请求是属于浏览器自动发送的请求

十、设置 HTTP 响应报文

1
2
3
4
5
6
7
8
write 和 end 的两种使用情况:
//1. write 和 end 的结合使用 响应体相对分散
response.write('xx');
response.write('xx');
response.write('xx');
response.end(); //每一个请求,在处理的时候必须要执行 end 方法的
//2. 单独使用 end 方法 响应体相对集中
response.end('xxx');

十一、网页资源的基本加载过程

网页资源的加载都是循序渐进的,首先获取 HTML 的内容, 然后解析 HTML 在发送其他资源的请求,如CSS,Javascript,图片等。

十二、静态资源服务

静态资源是指 内容长时间不发生改变的资源 ,例如图片,视频,CSS 文件,JS文件,HTML文件,字体文

件等

动态资源是指 内容经常更新的资源 ,例如百度首页,网易首页,京东搜索列表页面等

12.1 网站根目录或静态资源目录

HTTP 服务在哪个文件夹中寻找静态资源,那个文件夹就是 静态资源目录 ,也称之为 网站根目录

思考:vscode 中使用 live-server 访问 HTML 时, 它启动的服务中网站根目录是谁?

12.2 网页中的 URL

网页中的 URL 主要分为两大类:相对路径与绝对路径

12.2.1 绝对路径

绝对路径可靠性强,而且相对容易理解,在项目中运用较多

12.2.2 相对路径

相对路径在发送请求时,需要与当前页面 URL 路径进行 计算 ,得到完整 URL 后,再发送请求,学习阶段用的较多

例如当前网页 url 为 http://www.atguigu.com/course/h5.html

12.2.3 网页中使用 URL 的场景小结

包括但不限于如下场景:

  • a 标签 href
  • link 标签 href
  • script 标签 src
  • img 标签 srcvideo audio 标签 src
  • form 中的 action
  • AJAX 请求中的 URL

12.3 设置资源类型(mime类型)

媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )是一种标准,用来表示文档、文件或字节流的性质和格式。

1
2
mime 类型结构: [type]/[subType]
例如: text/html text/css image/jpeg image/png application/json

HTTP 服务可以设置响应头 Content-Type 来表明响应体的 MIME 类型,浏览器会根据该类型决定如何处理资源

下面是常见文件对应的 mime 类型

1
2
3
4
5
6
7
8
9
html: 'text/html',
css: 'text/css',
js: 'text/javascript',
png: 'image/png',
jpg: 'image/jpeg',
gif: 'image/gif',
mp4: 'video/mp4',
mp3: 'audio/mpeg',
json: 'application/json'

对于未知的资源类型,可以选择 application/octet-stream 类型,浏览器在遇到该类型的响应时,会对响应体内容进行独立存储,也就是我们常见的 下载 效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
require('http').createServer((request,response)=>{
//获取请求的方法已经路径
let {url,method} = request;
//判断请求方式以及请求路径
if(method == "GET" && url == "/index.html"){
//需要响应文件中的内容
let data = require('fs').readFileSync(__dirname + '/index.html');
response.end(data);
}else if(method == "GET" && url == "/css/app.css"){
//需要响应文件中的内容
let data = require('fs').readFileSync(__dirname + '/public/css/app.css');
response.end(data);
}else if(method == "GET" && url == "/js/app.js"){
//需要响应文件中的内容
let data = require('fs').readFileSync(__dirname + '/public/js/app.js');
response.end(data);
}
else{
//404响应
response.statusCode = 404;
response.end("<h1>404 Not Found</h1>");
}
}).listen(80,()=>{
console.log('80端口正在启动中....');
})

很明显上面的代码,当只要有一个请求路径就需要进行判断,显然这种方式不够完美,那么我们需要封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
require('http').createServer((request,response)=>{
//获取请求的方法已经路径
let {url,method} = request;
//文件夹路径
let rootDir = __dirname + '/public';
//拼接文件路径
let filePath = rootDir + url;
//读取文件内容
fs.readFile(filePath,(err,data)=>{
//判断
if(err){
//如果出现错误,响应404状态码
response.statusCode = 404;
response.end('<h1>404 Not Found</h1>');
}else{
//响应文件内容
response.end(data);
}
})
}).listen(80,()=>{
console.log('80端口正在启动中....');
})

12.4 GET POST 请求场景小结

GET 请求的情况:

  • 在地址栏直接输入 url 访问
  • 点击 a 链接
  • link 标签引入 css
  • script 标签引入 js
  • img 标签引入图片
  • form 标签中的 method 为 get (不区分大小写)
  • ajax 中的 get 请求

POST 请求的情况:

  • form 标签中的 method 为 post(不区分大小写)
  • AJAX 的 post 请求

十三、GET和POST请求的区别

GET 和 POST 是 HTTP 协议请求的两种方式。

  • GET 主要用来获取数据,POST 主要用来提交数据
  • GET 带参数请求是将参数缀到 URL 之后,在地址栏中输入 url 访问网站就是 GET 请求,POST 带参数请求是将参数放到请求体中
  • POST 请求相对 GET 安全一些,因为在浏览器中参数会暴露在地址栏
  • GET 请求大小有限制,一般为 2K,而 POST 请求则没有大小限制

七、模块化

一、介绍

1.1 什么是模块化与模块 ?

将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程称之为 模块化

其中拆分出的 每个文件就是一个模块 ,模块的内部数据是私有的,不过模块可以暴露内部数据以便其他模块使用

1.2 什么是模块化项目 ?

编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目

1.3 模块化好处

下面是模块化的一些好处:

  1. 防止命名冲突
  2. 高复用性
  3. 高维护性

二、模块暴露数据

2.1 模块初体验

可以通过下面的操作步骤,快速体验模块化

  1. 创建 me.js

    1
    2
    3
    4
    5
    6
    //声明函数
    function tiemo(){
    console.log('贴膜....');
    }
    //暴露数据
    module.exports = tiemo;
  2. 创建 index.js

1
2
3
4
//导入模块
const tiemo = require('./me.js');
//调用函数
tiemo();

2.2 暴露数据

模块暴露数据的方式有两种:

  1. module.exports = value
  2. exports.name = value

三、导入(引入)模块

在模块中使用 require 传入文件路径即可引入文件

1
const test = require('./me.js');

require 使用的一些注意事项:

  1. 对于自己创建的模块,导入时路径建议写 相对路径 ,且不能省略 ./ 和 ../

  2. js 和 json 文件导入时可以不用写后缀,c/c++编写的 node 扩展文件也可以不写后缀,但是一般用不到

  3. 如果导入其他类型的文件,会以 js 文件进行处理

  4. 如果导入的路径是个文件夹,则会 首先 检测该文件夹下 package.json 文件中 main 属性对应的文件,如果存在则导入,反之如果文件不存在会报错。如果 main 属性不存在,或者 package.json 不存在,则会尝试导入文件夹下的 index.jsindex.json ,如果还是没找到,就会报错

  5. 导入 node.js 内置模块时,直接require模块的名字即可,无需加 ./ 和 ../

四、导入模块的基本流程

require 导入 自定义模块 的基本流程

  1. 将相对路径转为绝对路径,定位目标文件
  2. 缓存检测
  3. 读取目标文件代码
  4. 包裹为一个函数并执行(自执行函数)。通过 arguments.callee.toString() 查看自执行函数
  5. 缓存模块的值
  6. 返回 module.exports 的值

五、CommonJS规范

module.exports exports 以及 require 这些都是CommonJS模块化规范中的内容。

而 Node.js 是实现了 CommonJS 模块化规范,二者关系有点像 JavaScript 与 ECMAScript

八、包管理工具

一、概念介绍

1.1 包是什么

『包』英文单词是 package ,代表了一组特定功能的源码集合

1.2 包管理工具

管理『包』的应用软件,可以对「包」进行 下载安装更新 删除 上传 等操作

借助包管理工具,可以快速开发项目,提升开发效率

包管理工具是一个通用的概念,很多编程语言都有包管理工具,所以 掌握好包管理工具非常重要

1.3 常用的包管理工具

下面列举了前端常用的包管理工具

  • npm
  • yarn
  • cnpm

二、npm

npm 全称 Node Package Manager ,翻译为中文意思是『Node 的包管理工具』

npm 是 node.js 官方内置的包管理工具,是 必须要掌握住的工具

2.1 npm 的安装

node.js 在安装时会 自动安装 npm ,所以如果你已经安装了 node.js,可以直接使用 npm

可以通过 npm -v 查看版本号测试,如果显示版本号说明安装成功,反之安装失败

2.2 npm 基本使用

2.2.1 初始化

创建一个空目录,然后以此目录作为工作目录 启动命令行工具 ,执行 npm init

npm init 命令的作用是将文件夹初始化为一个『包』, 交互式创建 package.json 文件

package.json 是包的配置文件,每个包都必须要有 package.json

package.json 内容示例:

1
2
3
4
5
6
7
8
9
10
11
{
"name": "1-npm", #包的名字
"version": "1.0.0", #包的版本
"description": "", #包的描述
"main": "index.js", #包的入口文件
"scripts": { #脚本配置
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", #作者
"license": "ISC" #开源证书
}

2.2.2 搜索包

搜索包的方式有两种

  1. 命令行 『npm s/search 关键字』
  2. 网站搜索 网址是 https://www.npmjs.com/
2.2.3 下载安装包

我们可以通过 npm install 和 npm i 命令安装包

1
2
3
4
5
6
# 格式
npm install <包名>
npm i <包名>
# 示例
npm install uniq
npm i uniq

运行之后文件夹下会增加两个资源

  • node_modules 文件夹 存放下载的包
  • package-lock.json 包的锁文件 ,用来锁定包的版本

2.2.4 require 导入 npm 包基本流程
  1. 在当前文件夹下 node_modules 中寻找同名的文件夹
  2. 在上级目录中下的 node_modules 中寻找同名的文件夹,直至找到磁盘根目录

2.3 生产环境与开发环境

开发环境是程序员 专门用来写代码 的环境,一般是指程序员的电脑,开发环境的项目一般 只能程序员自己访问

生产环境是项目 代码正式运行 的环境,一般是指正式的服务器电脑,生产环境的项目一般 每个客户都可以访问

2.4 生产依赖与开发依赖

我们可以在安装时设置选项来区分 依赖的类型 ,目前分为两类:

2.5 全局安装

我们可以执行安装选项 -g 进行全局安装

1
npm i -g nodemon

全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令

该命令的作用是 自动重启 node 应用程序

2.5.1环境变量Path

Path 是操作系统的一个环境变量,可以设置一些文件夹的路径,在当前工作目录下找不到可执行文件时,就会在环境变量 Path 的目录中挨个的查找,如果找到则执行,如果没有找到就会报错

2.6 安装包依赖

在项目协作中有一个常用的命令就是 npm i ,通过该命令可以依据 package.json packagelock.json 的依赖声明安装项目依赖

1
2
npm i
npm install

2.7 安装指定版本的包

项目中可能会遇到版本不匹配的情况,有时就需要安装指定版本的包,可以使用下面的命令

1
2
3
4
## 格式
npm i <包名@版本号>
## 示例
npm i jquery@1.11.2

2.8 删除依赖

项目中可能需要删除某些不需要的包,可以使用下面的命令

1
2
3
4
5
## 局部删除
npm remove uniq
npm r uniq
## 全局删除
npm remove -g nodemon

2.9 配置命令别名

通过配置命令别名可以更简单的执行命令

配置 package.json 中的 scripts 属性

1
2
3
4
5
6
{
"scripts": {
"server": "node server.js",
"start": "node index.js",
},
}

配置完成之后,可以使用别名执行命令

1
2
npm run server
npm start

不过 start 别名比较特别,使用时可以省略 run

三、cnpm

3.1 介绍

cnpm 是一个淘宝构建的 npmjs.com 的完整镜像,也称为『淘宝镜像』,网址https://npmmirror.com/

cnpm 服务部署在国内 阿里云服务器上 , 可以提高包的下载速度

官方也提供了一个全局工具包 cnpm ,操作命令与 npm 大体相同

3.2 安装

我们可以通过 npm 来安装 cnpm 工具

1
npm install -g cnpm --registry=https://registry.npmmirror.com

3.3 操作命令

3.4 npm 配置淘宝镜像

用 npm 也可以使用淘宝镜像,配置的方式有两种

  • 直接配置
  • 工具配置
3.4.1 直接配置

执行如下命令即可完成配置

1
npm config set registry https://registry.npmmirror.com/
3.4.2 工具配置

使用 nrm 配置 npm 的镜像地址 npm registry manager

  1. 安装 nrm
1
npm i -g nrm
  1. 修改镜像
1
nrm use taobao
  1. 检查是否配置成功(选做)
1
npm config list

检查 registry 地址是否为 https://registry.npmmirror.com/ , 如果 是 则表明成功

虽然 cnpm 可以提高速度,但是 npm 也可以通过淘宝镜像进行加速,所以 npm 的使用率还是高于 cnpm

四、yarn

4.1 yarn 介绍

yarn 是由 Facebook 在 2016 年推出的新的 Javascript 包管理工具,官方网址:https://yarnpkg.com/

4.2 yarn 特点

yarn 官方宣称的一些特点

  • 速度超快:yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快
  • 超级安全:在执行代码之前,yarn 会通过算法校验每个安装包的完整性
  • 超级可靠:使用详细、简洁的锁文件格式和明确的安装算法,yarn 能够保证在不同系统上无差异的工作

4.3 yarn 安装

我们可以使用 npm 安装 yarn

1
npm i -g yarn

4.4 yarn 常用命令

4.5 yarn 配置淘宝镜像

可以通过如下命令配置淘宝镜像

1
yarn config set registry https://registry.npmmirror.com/

可以通过 yarn config list 查看 yarn 的配置项

4.6 npm yarn 选择

大家可以根据不同的场景进行选择

  1. 个人项目

如果是个人项目, 哪个工具都可以 ,可以根据自己的喜好来选择

  1. 公司项目

如果是公司要根据项目代码来选择,可以 通过锁文件判断 项目的包管理工具

  • npm 的锁文件为 package-lock.json
  • yarn 的锁文件为 yarn.lock

五、管理发布包

5.1 创建与发布

我们可以将自己开发的工具包发布到 npm 服务上,方便自己和其他开发者使用,操作步骤如下:

  1. 创建文件夹,并创建文件 index.js, 在文件中声明函数,使用 module.exports 暴露
  2. npm 初始化工具包,package.json 填写包的信息 (包的名字是唯一的)
  3. 注册账号 https://www.npmjs.com/signup
  4. 激活账号 ( 一定要激活账号 )
  5. 修改为官方的官方镜像 (命令行中运行 nrm use npm )
  6. 命令行下 npm login 填写相关用户信息
  7. 命令行下 npm publish 提交包 👌

5.2 更新包

后续可以对自己发布的包进行更新,操作步骤如下

  1. 更新包中的代码
  2. 测试代码是否可用
  3. 修改 package.json 中的版本号
  4. 发布更新
1
npm publish

5.3 删除包

执行如下命令删除包

1
npm unpublish --force

删除包需要满足一定的条件,https://docs.npmjs.com/policies/unpublish

  • 你是包的作者
  • 发布小于 24 小时
  • 大于 24 小时后,没有其他包依赖,并且每周小于 300 下载量,并且只有一个维护者

六、扩展内容

在很多语言中都有包管理工具,比如: