目录
1.【npm 与 包】
1.1 包管理配置文件
npm 规定,在项目根目录中,必须提供一个叫做package.json的包管理配置文件。用来记录与项目有关的一些配置信息。例如:
1.项目的名称、版本号、描述等
2.项目中都用到了哪些包
3.哪些包只在开发期间会用到
4.那些包在开发和部署时都需要用到
多人协作的问题
1.整个项目的体积是 30.4M
2.第三方包的体积是 28.8M
3.项目源代码的体积 1.6M
4.遇到的问题:第三方包的体积过大,不方便团队成员之间共享项目源代码。
5.解决方案:共享时剔除node_modules
如何记录项目中安装了哪些包
在项目根目录中,创建一个叫做package.json的配置文件,即可用来记录项目中安装了哪些包。从而方便剔除node_modules目录之后,在团队成员之间共亨项目的源代码。
注意 :
今后在项目开发中,一定要把 node_modules 文件夹,添加到 .gitignore 忽略文件中。
快速创建 package.json
npm 包管理工具提供了一个快捷命令,可以在执行命令时所处的目录中,快速创建package.json这个包管理配置文件:
npm init -y
注意 :
1.上述命令只能在英文的目录下成功运行!所以,项目文件夹的名称一定要使用英文命名,不要使用中文,不能出现空格。
2.运行npm install 命令安装包的时候,npm 包管理工具会自动把包的名称和版本号,记录到 package.json 中。
dependencies 节点
package.json文件中,有一个dependencies 节点,专门用来记录您使用 npm install 命令安装了哪些包。
一次性安装所有的包
当我们拿到一个剔除了node_modules 的项目之后,需要先把所有的包下载到项目中,才能将项目运行起来。否则会报类似于下面的错误 :
Error: Cannot find module " moment '可以运行npm install命令(或npm i)一次性安装所有的依赖包
卸载包
可以运行npm uninstall命令,来卸载指定的包 :
npm uninstall baom
注意 :npm uninstall 命令执行成功后,会把卸载的包,自动从package.json的dependencies 中移除掉。
devDependencies节点
如果某些包只在项目开发阶段会用到,在项目上线之后不会用到,则建议把这些包记录到 devDependencies 节点中。
与之对应的,如果某些包在开发和项目上线之后都需要用到,则建议把这些包记录到dependencies 节点中。
使用如下的命令,将包记录到devDependencies 节点中 :
//安装指定的包,并记录到devDependencies节点中
npm i 包名 -D
//注意:上述命令是简写形式,等价于下面完整的写法:
npm install 包名 --save-dev
1.2 解决下包速度慢的问题
为什么下包速度慢
在使用npm 下包的时候,默认从国外的 https://registry.npmjs.org/ 服务器进行下载,此时,网络数据的传输需要经过漫长的海底光缆,因此下包速度会很慢。
淘宝NPM镜像服务器
淘宝在国内搭建了一个服务器,专门把国外官方服务器上的包同步到国内的服务器,然后在国内提供下包的服务。从而极大的提高了下包的速度。
扩展:
镜像(Mirroring)是一种文件存储形式,一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。
切换 npm 的下包镜像源
下包的镜像源,指的就是下包的服务器地址。
#查看当前的下包镜像源
npm config get regrstry
#将下包的镜像源切换为淘宝镜像源
npm config set registry=https ://registry.npm.taobao.org/
#检查镜像源是否下载成功
npm config get registry
nrm
为了更方便的切换下包的镜像源,我们可以安装 nrm 这个小工具,利用nrm 提供的终端命令,可以快速查看和切换下包的镜像源。
#通i过tnpm包管理器,将nrm安装为全局可用的工具
npm i nrm -g
#查看所有可用的镜像源
nrm ls
#将下包的镜像源切换为taobao镜像
nrm use taobao
1.3 包的分类
项目包
那些被安装到项目的 node_modules目录中的包,都是项目包。
项目包又分为两类,分别是:
1.开发依赖包(被记录到devDependencies节点中的包,只在开发期间会用到)1 npm i 包名 -D
2.核心依赖包(被记录到dependencies 节点中的包,在开发期间和项目上线之后都会用到)npm i 包名
全局包
在执行npm install命令时,如果提供了 -g 参数。则会把包安装为全局包。
全局包会被安装到C:NUsersV用户目录VAppData\Roaming\npm(node_modules目录下。
全局安装指定的包
npm i 包名-g
卸载全局安装的包
npm uninstall 包名 -g
注意 :
1.只有工具性质的包,才有全局安装的必要性。因为它们提供了好用的终端命令。2.判断某个包是否需要全局安装后才能使用,可以参考官方提供的使用说明即可。
i5ting_toc
i5ting_toc是一个可以把 md文档转为 html页面的小工具,使用步骤如下 :
#将 i5ting _toc 安装为全局包
npm install -g i5ting —_toc
#调用 i5ting_toc,轻松实现 md 转 html 的功能
i5ting_toc -f 要转换的md文件路径 -o
规范的包结构
—个规范的包,它的组成结构,必须符合以下3点要求:
1.包必须以单独的目录而存在
2.包的顶级目录下要必须包含 package.json 这个包管理配置文件
3.package.json 中必须包含name,version,main这三个属性,分别代表包的名字、版本号、包的入口。
1.4 开发属于自己的包
需要实现的功能
1.格式化日期
2.转义HTML中的特殊字符3.还原HTML中的特殊字符
// 1.导入自己的包
const itheima = require( 'itehima-utils ')
// -------功能1:格式化日期-------
const dt = itheima.dateFormat(new Date())
//输出
console.log(dt)
// -------功能2:转义HTML中的特殊字符-------
const htmlStr = '<h1 style="color: red;">你好!© <span>小黄! </span></h1>'
const str = itheima. htmlEscape(htmlStr)
//输出
console.log(str)
// -------功能3:还原HTML中的特殊字符-------
const rawHTML = itheima.htmlUnEscape(str)
// 输出
console.log( rawHTML)
初始化包的基本结构
1.新建itheima-tools 文件夹,作为包的根目录
2.在itheima-tools文件夹中,新建如下三个文件:
package.json (包管理配置文件)
index.js (包的入口文件)
README.md (包的说明文档)
初始化 package.json
{
"name": "itheima-tools",
"version": "1.0.0",
"main": "index.js",
"description": "提供了格式化时间、HTMLEscape相关的功能",
"keywords": ["itheima", "dateFormat", "escape"],
"license": "ISC"
}
在index.js 中定义格式化时间的方法
//格式化时间的方法
function dateFormat(dateStr) {
const dt = new Date(dateStr)
const y = dt.getFullYear()
const m = padZero(dt.getMonth() + 1)
const d = padZero(dt.getDate())
const hh = padZero(dt.getHours())
const mm = padZero(dt.getMinutes())
const ss = padZero(dt.getSeconds())
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
//补零的方法
function padZero(n) {
return n > 9 ? n : '0' +n
}
module.exports = {
dateFormat
}
在index.js 中定义转义HTML的方法
function htmlEscape(htmlstr) {
return htmlstr.replace(/<|>|"|&/g, (match) => {
switch (match) {
case '<':
return '<'
case '>':
return ' >'
case '"':
return ' " '
case "&":
return ' & '
}
})
}
在index.js 中定义还原HTML的方法
function htmlUnEscape(str) {
return str.replace(/<|>|"|&/g, (match) => {
switch (match) {
case '<':
return '<'
case '>':
return '>'
case '"':
return '"'
case "&":
return '&'
}
})
}
将不同的功能进行模块化拆分
1.将格式化时间的功能,拆分到src -> dateFormat.js 中
2.将处理HTML字符串的功能,拆分到 src -> htmIEscape.js 中3.在index.js中,导入两个模块,得到需要向外共享的方法
4.在index.js 中,使用module.exports 把对应的方法共享出去
编写包的说明文档
包根目录中的 README.md 文件,是包的使用说明文档。
我们所创建的这个包的README.md文档中,会包含以下6项内容:
安装方式、导入方式、格式化时间、转义HTML中的特殊字符、还原HTML 中的特殊字符、开源协议
1.5 发布包
注册 npm 账号
1.访问https://www.npmjs.com/ 网站,点击 sign up按钮,进入注册用户界面
2.填写账号相关的信息:Full Name、Public Email、Username、Password
3.点击Create an Account 按钮,注册账号
4.登录邮箱,点击验证链接,进行账号的验证
登录 npm 账号
可以在终端中执行npm login命令,依次输入用户名、密码、邮箱后,即可登录成功。
注意:在运行npm login命令之前,必须先把下包的服务器地址切换为npm的官方服务器。否则会导致发布包失败!
把包发到 npm 上
将终端切换到包的根目录之后,运行npm publish命令,即可将包发布到npm上(注意:包名不能雷同)。
删除已发布的包
运行npm unpublish 包名 --force命令,即可从npm删除已发布的包。
注意 :
1.npm unpublish 命令只能删除72小时以内发布的包
2.npm unpublish删除的包,在24小时内不允许重复发布
3.发布包的时候要慎重,尽量不要往npm上发布没有意义的包
2.【模块的加载机制】
2.1 优先从缓存中加载
模块在第一次加载后会被缓存。这也意味着多次调用require()不会导致模块的代码被执行多次。
注意:不论是内置模块、用户自定义模块、还是第三方模块,它们都会优先从缓存中加载,从而提高模块的加载效率。
2.2 内置模块的加载机制
内置模块是由Node.js官方提供的模块,内置模块的加载优先级最高。
例如 :require('fs')始终返回内置的fs模块,即使在node_modules目录下有名字相同的包也叫做fs。
2.3 自定义模块的加载机制
使用require)加载自定义模块时,必须指定以 ./ 或 ../ 开头的路径标识符。在加载自定义模块时,如果没有指定 ./ 或 ../ 这样的路径标识符,则node 会把它当作内置模块或第三方模块进行加载。
同时,在使用require()导入自定义模块时,如果省略了文件的扩展名,则 Node.,js 会按顺序分别尝试加载以下的文件:
1.按照确切的文件名进行加载
2.补全 .js 扩展名进行加载
3.补全 .json 扩展名进行加载
4.补全 .node 扩展名进行加载
5.加载失败,终端报错
2.4 第三方模块的加载机制
如果传递给require()的模块标识符不是一个内置模块,也没有以‘1”或‘./”开头,则 Node.js 会从当前模块的父目录开始,尝试从/node_modules文件夹中加载第三方模块。
如果没有找到对应的第三方模块,则移动到再上一层父目录中,进行加载,直到文件系统的根目录。
例如,假设在'C:\Users\itheima\project\foo,js'文件里调用了require('tools'),则 Node.js 会按以下顺序查找:1.C:\Usersvitheimaproject\node_modules\tools
2.C:\Users\itheima\node_modules\tools
3.C:\Users\node_modules\tools
4.C:\node_modules\tools
2.5 目录作为模块
当把目录作为模块标识符,传递给require()进行加载的时候,有三种加载方式:
1.在被加载的目录下查找一个叫做package.json的文件,并寻找 main属性,作为require(加载的入口
2.如果目录里没有package.json文件,或者main 入口不存在或无法解析,则 Node.js将会试图加载目录下的 indexjs 文件。3.如果以上两步都失败了,则Node.js 会在终端打印错误消息,报告模块的缺失:Error:Cannot find module '模块名称'
3.【初识 Express】
3.1 Express 简介
什么是 Express
官方概念: Express是基于Node.js 平台,快速、开放、极简的 Web开发框架。
通俗的理解:Express 的作用和Node.,js 内置的 http模块类似,是专门用来创建Web 服务器的。Express的本质:就是一个npm 上的第三方包,提供了快速创建 Web服务器的便捷方法。
进一步理解 Express
思考:不使用Express 能否创建Web 服务器?
答案:能,使用Node.,js 提供的原生 http模块即可。
思考:既生瑜何生亮(有了http 内置模块,为什么还有用Express)?
答案: http内置横块用起来很复杂,开发效率低; Express是基于内置的 http模块进一步封装出来的,能够极大的提高开发效率。
思考: http 内置模块与Express是什么关系?
答案:类似于浏览器中Web API和jQuery的关系。后者是基于前者进一步封装出来的。
Express 能做什么
对于前端程序员来说,最常见的两种服务器,分别是:
Web 网站服务器:专门对外提供 Web 网页资源的服务器。API接口服务器:专门对外提供API接口的服务器。
使用Express,我们可以方便、快速的创建Web 网站的服务器或API接口的服务器。
3.2 Express 的基本使用
安装
在项目所处的目录中,运行如下的终端命令,即可将express安装到项目中使用 :
npm i express@4.17.1
创建基本的 Web 服务器
//1. 导入express
const express = require( ' express ' )
//2.创建web服务器
const app = express()
//3. 调用app.listen(端口号,启动成功后的回调函数),启动服务器
app.listen(80,() =>{
console.log('express server running at http://127.0.0.1')
})
监听 GET 请求
通过 app.get()方法,可以监听客户端的GET 请求,具体的语法格式如下:
// 参数1:客户端请求的URL地址
// 参数2:请求对应的处理函数
// req:请求国象(包含了与请求相关的属性与方法)
// res:响应对象(包含了与响应相关的属性与方法)
app.get('请求URL',function(req,res) {/*处理函数*/ )
监听 POST 请求
通过app.post()方法,可以监听客户端的POST 请求,具体的语法格式如下:
// 参数1:客户端请求的URL地址
// 参数2:请求对应的处理函数
// req:请求对象(包含了与请求相关的属性与方法)
// res:晌应对象(包含了与响应相关的属性与方法)
app.post('请求URL',function(req,res) {/*处理函数*/)
把内容响应给客户端
通过res.send0方法,可以把处理好的内容,发送给客户端:
app.get('/user',(req,res) => {
//内客户端发送 JSON 对象.
res.send({name:'zs ',age:20, gender:'男'})
})
app.post('/user',(req,res) => {
//向客户端发送文本内容
res.send('请求成功')
})
获取URL中携带的查询参数
通过req.query对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数:
app.get('/',(req,res) => {
// req.query 默认是一个空对象
// 客户端使用 ?name=zs&age=20 这种查询字符串形式,发送到服务器的参数
// 可以通过req.query 对象访问到,例如:
// req.query.name req.query.age
console.log(req.query)
})
获取 URL中的动态参数
通过req.params 对象,可以访问到URL中,通过:匹配到的动态参数:
// URL地址中,可以通过 : 参数名的形式,匹配同态参数值
//注意 : 这里的 :id 是一个动态参数 任意取 合法合理的名字 可以有多个
app.get('/ user/:id',(req,res) =>{
//req.params 默认是一个空对象
//里面存放着通过 : 动态匹配到的参数值
console.log(req.params)
})
3.3 托管静态资源
express.static()
express提供了一个非常好用的函数,叫做express.static(),通过它,我们可以非常方便地创建一个静志资源服务器,
例如,通过如下代码就可以将 public目录下的图片、CSS文件、JavaScript 文件对外开放访问了:
app.use(express.static('public'))
注意:
Express在指定的静态目录中查找文件,并对外提供资源的访问路径。因此,存放静态文件的目录名不会出现在URL中。
托管多个静态资源目录
如果要托管多个静态资源目录,请多次调用express.static()函数:
app.use(express.static('public'))
app.use(express.static('files'))
访问静态资源文件时,express.static)函数会根据目录的添加顺序查找所需的文件。
挂载路径前缀
如果希望在托管的静态资源访问路径之前,挂载路径前缀,则可以使用如下的方式:
app.use('/public', express.static('public'))
3.4 nodemon
为什么要使用 nodemon
在编写调试Node.,js项目的时候,如果修改了项目的代码,则需要频繁的手动close掉,然后再重新启动,非常繁琐.现在,我们可以使用nodemon (https://www.npmjs.com/package/nodemon)这个工具,它能够监听项目文件的变动,当代码被修改后,nodemon 会自动帮我们重启项目,极大方便了开发和调试。
安装 nodemon
在终端中,运行如下命令,即可将nodemon安装为全局可用的工具:
npm install -g nodemon
使用nodemon
当基于Node.js编写了一个网站应用的时候,传统的方式,是运行node app.js 命令,来启动项目。
这样做的坏处是:代码被修改之后,需要手动重启项目。
我们可以将node 命令替换为nodemon 命令,使用nodemon app.js 来启动项目。
这样做的好处是:代码被修改之后,会被nodemon监听到,从而实现自动重启项曰的效里
node app.js
#将上面的终端命令,替换为下面的终端命令,即可实现自动重启项目的效果
nodemon app.js
Node.js与Express基础教程:包管理、模块加载与Web服务器搭建
267

被折叠的 条评论
为什么被折叠?



