01-Node（工程化）

hs 7/25/2022

# 1. Node是什么

官方对Node.js的定义：Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境。

中文网：nodejs.org/zh-cn/
Node.js基于V8引擎来执行JavaScript的代码
在Node.js中我们也需要进行一些额外的操作，比如文件系统读/写、网络IO、加密、压缩解压文件等操作
在Chrome浏览器中，还需要解析、渲染HTML、CSS等相关渲染引擎，另外还需要提供支持浏览器操作的API、浏览器自己的事件循环等

Node的构架

我们编写的JavaScript代码会经过V8引擎，再通过Node.js的Bindings，将任务放到Libuv的事件循环中；
libuv（Unicorn Velociraptor—独角伶盗龙）是使用C语言编写的库；
libuv提供了事件循环、文件系统读写、网络IO、线程池等等内容；

# 2. Node的应用场景

Node.js的快速发展也让企业对Node.js技术越来越重视，在前端招聘中通常会对Node.js有一定的要求，特别对于高级前端开发工程师，Node.js更是必不可少的技能，总之一句话，Node是每一个前端程序员必须掌握的技能

Node的应用场景

前端开发的库都是以node包的形式进行管理，后面会学习大量的库
npm、yarn工具成为前端开发使用最多的工具
使用Node.js作为web服务器开发、中间件、代理服务器
服务端渲染，借助Node.js完成前后端渲染的同构应用
使用Node可以编写一些脚本工具
使用Electron来开发桌面应用程序，是需要使用Node
Node也可以开API接口

# 3. Node安装和管理

Node.js是在2009年诞生的，目前最新的版本是分别是LTS 16.15.1以及Current 18.4.0

LTS版本：（Long-term support, 长期支持）相对稳定一些，推荐线上环境使用该版本，建议选择此版本
Current版本：最新的Node版本，包含很多新特性

最直接的安装方法

直接下载对应的安装包下载安装
window选择.msi安装包，Mac选择.pkg安装包
安装过程中会配置环境变量
会自动安装npm（Node Package Manager）工具

# 4. Node的版本工具

可以在电脑上安装不同版本的Node，使用时，可以切换不同的版本。

nvm：Node Version Manager
通过 nvm install latest 安装最新的node版本
通过 nvm list 展示目前安装的所有版本
通过 nvm use 切换版本

# 4. Node环境中运行JS代码

两个环境，可以运行JS代码

浏览器
node环境（可以通过终端命令node js文件的方式来载入和执行对应的js文件）

安装vscode插件，code runner插件来，运行JS代码。

# 传递参数

执行node程序的过程中，可以给node传递一些参数

node index.js env=development wangcai
在程序中通过process内置对象可以获取到传递的参数
在process内置对象的argv属性中存储着我们写的参数

# 5. Node的全局对象

Node中给我们提供了一些全局对象，方便我们进行一些操作

全局对象实际上是模块中的变量，只是每个模块都有，看来像是全局变量
包括：__dirname、__filename、exports、module、require()

__dirname

获取当前文件所在的路径，不包括后面的文件名

__filename

获取当前文件所在的路径和文件名称，包括后面的文件名称

process对象

process提供了Node进程中相关的信息，如Node的运行环境、参数信息等

console对象

提供了简单的调试控制台，在前面讲解输入内容时已经学习过了

定时器函数

setTimeout
setInterval
setImmediate，与setTimeout(callback, 0)是有区别的，在事件环阶段会讲
process.nextTick，添加到下一次tick队列中

process对象

process提供了Node进程中相关的信息，如Node的运行环境、参数信息等

# 6. global对象

global是一个全局对象，事实上前面我们提到的process、console、setTimeout等都有被放到global中

在新的标准中还有一个globalThis，也是指向全局对象的
类似于浏览器中的window
在浏览器中，全局变量都是在window上的，比如有document、setInterval、setTimeout、alert、console等
在Node中，我们也有一个global属性，并且看起来它里面有很多其他对象
浏览器中var声明的全局变量，会挂载到window上，node中var声明的变量，不会挂载到global上

# 7. 内置模块path

Linux和window上的路径时不一样的

window上会使用 \ 或者 \ 来作为文件路径的分隔符，当然目前也支持 /
Linux,Unix操作系统上使用 / 来作为文件路径的分隔符
如果我们在window上使用 \ 来作为分隔符开发了一个应用程序，要部署到Linux就可以出现问题
为了屏蔽他们之间的差异，在开发中对于路径的操作我们可以使用 path 模块

path模块用于对路径和文件进行处理，提供了很多方法

常见API

dirname：获取文件的父文件夹
basename：获取文件名
extname：获取文件扩展名
path.join：路径的拼接
path.resolve：把一个路径或路径片段的序列解析为一个绝对路径

02-JS模块化开发

hs 7/25/2022

# 1. 什么是模块化开发

模块化（组件化）指的就是将一个大的功能拆分为一个一个小的模块，通过不同的模块的组合来实现一个大功能。

在node中一个 js 文件就是一个模块
模块内部代码对于外部来说都是不可见的，可以通过两种方式向外部暴露
优点：1.复用性 2.维护性

早期使用IIFE解决命名冲突问题，但也有新的问题

第一，我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用
第二，代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；
第三，在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况；

JavaScript社区为了解决上面的问题，涌现出一系列好用的规范，接下来我们就学习具有代表性的一些规范

AMD、CMD、CommonJS
JavaScript本身，直到ES6（2015）才推出了自己的模块化方案
我们重点讲解CommonJS和ES6的模块化

# 2. CommonJS和Node

CommonJS是一个规范，简称为CJS，Node是CommonJS在服务器端一个具有代表性的实现

CommonJS是规范，Node在服务器端实现了这个规范
Browserify是CommonJS在浏览器中的一种实现
webpack打包工具具备对CommonJS的支持和转换

CommonJS规范要求

在Node中每一个js文件都是一个单独的模块
模块中包括CommonJS规范的核心变量：exports、module.exports、require，使用这些变量来方便的进行模块化开发
exports和module.exports可以负责对模块中的内容进行导出
require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容

# 3. 导出

exports导出

exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出
另外一个文件中可以导入，require通过各种查找方式，最终找到了exports这个对象，将这个exports对象赋值给一个变量

module.exports导出

CommonJS中是没有module.exports的概念的
但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module
所以在Node中真正用于导出的其实根本不是exports，而是module.exports，module才是导出的真正实现者
之所以exports也可以导出，是因为module对象的exports属性是exports对象的一个引用
就是说 module.exports = exports = main中的bar

# 4. require函数解析

require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象

模块在被第一次引入时，模块中的js代码会被运行一次
模块被多次引入时，会缓存，最终只加载（运行）一次
深度优先算法进行加载

情况一：X是一个Node核心模块，比如path、http

直接返回核心模块，并且停止查找

情况一：X是以 ./ 或 ../ 或 /（根目录）开头的

第一步：将X当做一个文件在对应的目录下查找
- 如果有后缀名，按照后缀名的格式查找对应的文件
- 如果没有后缀名，会按照如下顺序
  - 1，直接查找文件X
  - 2，查找X.js文件
  - 3，查找X.json文件
  - 4，查找X.node文件
第二步：没有找到对应的文件，将X作为一个目录
- 查找目录下面的index文件
  - 1，查找X/index.js文件
  - 2，查找X/index.json文件
  - 3，查找X/index.node文件
如果没有找到，那么报错：not found

情况三：直接是一个X（没有路径），并且X不是一个核心模块

会在用户电脑上查找这个第三方模块，会在多个地方查找，如果找不到，就报错

# 5. CommonJS规范缺点

CommonJS加载模块是同步的

同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行
在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快
所以它应用在浏览器，同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作
所以在浏览器中，我们通常不使用CommonJS规范
早期为了可以在浏览器中使用模块化，通常会采用AMD或CMD
但是目前一方面现代的浏览器已经支持ES Modules，AMD和CMD已经使用非常少了

# 6. ESModule用法详解

ECMA推出自己的模块化系统，弥补了JavaScript没有模块化一直是它的痛点

CommonJS、AMD、CMD等，仅仅是JS社区的规范，并不是官方的
采用ES Module将自动采用严格模式：use strict

ES Module模块采用export和import关键字来实现模块化

export负责将模块内的内容导出
import负责从其他模块导入内容

浏览器中演示ES6的模块化开发（需要在服务器端来测试）

- <script src="./modules/foo.js" type="module"></script>
- <script src="main.js" type="module"></script>

# exports关键字

export关键字将一个模块中的变量、函数、类等导出
方式一：在语句声明的前面直接加上export关键字
方式二：将所有需要导出的标识符，放到export后面的 {}中（这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的）
方式三：导出时给标识符起一个别名，通过as关键字起别名

# import关键字

import关键字负责从另外一个模块中导入内容
方式一：import {标识符列表} from '模块'，这里的{}也不是一个对象，里面只是存放导入的标识符列表内容
方式二：导入时给标识符起别名，通过as关键字起别名
方式三：通过 * 将模块功能放到一个模块功能对象（a module object）上

# export和import结合使用

在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中，这样方便指定统一的接口规范，也方便阅读

# default用法

前面我们学习的导出功能都是有名字的导出（named exports）

在导出export时指定了名字
在导入import时需要知道具体的名字

另一种导出叫做默认导出（default export）

默认导出export时可以不需要指定名字
在导入时不需要使用 {}，并且可以自己来指定名字
在一个模块中，只能有一个默认导出（default export）

# import函数

通过import加载一个模块，是不可以在其放到逻辑代码中的，ES Module在被JS引擎解析时，就必须知道它的依赖关系，这个时候js代码没有任何的运行，所以无法在进行类似于if判断中根据代码的执行情况

确确实实希望动态的来加载某一个模块

如果根据不同的条件，动态来选择加载模块的路径
使用 import() 函数来动态加载
import函数返回一个Promise，可以通过then获取结果

03-包管理工具

hs 7/25/2022

# 1. npm包管理工具

包管理工具npm

Node Package Manager，也就是Node包管理器，也是一个应用程序
Node.js 的包基本遵循 CommonJS 规范，将一组相关的模块组合在一起，形成一个完整的工具
npm属于node的一个管理工具，安装Node时，已帮我们安装好了
通过 NPM 可以对 Node 的工具包进行搜索、下载、安装、删除、上传。借助别人写好的包，可以让我们的开发更加方便
where npm 该命令可以查看 npm 安装的位置
一般在搜索工具包的时候，会到 npmjs.org 搜索
安装一个包时其实是从registry（NPM仓库）上面下载的包
发布自己的包其实是发布到registry（NPM仓库）上面的

# 2. package配置文件

一个项目，有非常多的包，我们需要通过一个配置文件（package.json）来管理这些包

每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、React）还是后端项目（Node）
配置文件会记录着你项目的名称、版本号、项目描述，项目所依赖的其他库的信息和依赖库的版本号

生成配置文件

方式一：npm init –y
方式二：通过脚手架创建项目，脚手架会帮助我们生成package.json

{
  "name": "1-npm",      #包的名字(注意生成的包名不能使用中文，大写 ！！！ 不能使用 npm 作为包的名字)
  "version": "1.0.0",   #包的版本
  "description": "",    #包的描述
  "main": "index.js",   #包的入口文件
  "scripts": {			#脚本配置
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",			#作者
  "license": "ISC"		#版权声明
}

package.json常见的属性

name是项目的名称，必填
version是当前项目的版本号，必填
description是描述信息，很多时候是作为项目的基本描述
author是作者相关信息（发布时用到）
license是开源协议（发布时用到）
- www.ruanyifeng.com/blog/2011/0…
private属性记录当前的项目是否是私有的，当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式
main属性，设置程序的入口，实际上是找到对应的main属性查找文件的
scripts属性用于配置一些脚本命令，以键值对的形式存在，配置后我们可以通过 npm run 命令的key来执行这个命令
- npm start和npm run start 它们是等价的，对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行；
dependencies属性
- dependencies属性是指定无论开发环境还是生成环境都需要依赖的包
- 项目实际开发用到的一些库模块vue、vuex、vue-router、react、react-dom、axios等
devDependencies属性
- 在生成环境是不需要的，比如webpack、babel等
- 通过 npm install webpack --save-dev，将它安装到devDependencies属性中

依赖的版本管理（版本规范是X.Y.Z）

X主版本号（major）：当你做了不兼容的 API 修改（可能不兼容之前的版本）
Y次版本号（minor）：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）
Z修订号（patch）：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug）
x.y.z：表示一个明确的版本号
^x.y.z：表示x是保持不变的，y和z永远安装最新的版本
~x.y.z：表示x和y保持不变的，z永远安装最新的版本
package-lock.json 是包版本的锁文件，专门来固定包的版本的，不要手动修改

npm install（安装npm包分两种情况）

搜索包: npm search jquery (npm s jquery)
全局安装（global install）： npm install webpack -g
- 全局安装是直接将某个包安装到全局
- 全局安装命令在任意的命令行下, 都可以执行
- 全局命令的安装位置 C:\Users\你的用户名\AppData\Roaming\npm\node_modules
- 通常使用npm全局安装的包都是一些工具包：yarn、webpack等
- 全局安装axios之后并不能让我们在所有的项目中使用 axios等
局部安装（local install）： npm install webpack
- 项目安装会在当前目录下生成一个 node_modules 文件夹
- 局部安装分为开发时依赖和生产时依赖
  - npm install(i) axios 默认安装开发和生产依赖
  - npm install(i) axios --save（-S）开发依赖
  - npm install(i) webpack --save-dev（-D）开发依赖
  - npm install(i) 安装package.json中的依赖包
  - npm install(i) --production // 只安装 dependencies 中的依赖
  - npm remove jquery 移除包

换源

某些情况下我们没办法很好的从 registry.npmjs.org下载下来一些需要的包
查看npm镜像 npm config get registry
设置npm镜像 npm config set registry registry.npm.taobao.org

npm其他命令之卸载某个依赖包

npm uninstall package
npm uninstall package --save-dev
npm uninstall package -D

npm其他命令之清除缓存

npm cache clean

npm更多命令

docs.npmjs.com/cli-documen…
更多的命令，可以根据需要查阅官方文档

# 3. yarn、cnpm、npx

yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具

yarn 是为了弥补早期npm 的一些缺陷而出现的
早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题
从npm5版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用yarn
yarn 安装 npm install yarn -g
yarn 修改仓库地址 yarn config set registry registry.npm.taobao.org

yarn 的相关命令
1)  yarn --version  检测是否安装成功
2)  yarn init   初始化，生成package.json   
3)  yarn global add  package    全局安装
4)  yarn global remove less   全局删除 
5)  yarn add package   局部安装  
6)  yarn add package --dev   (相当于npm中的-D)
7)  yarn remove package  删除局部包文件
8)  yarn list      列出已经安装的包名 用的很少
9)  yarn info packageName   获取包的有关信息  几乎不用
10)  yarn  安装package.json中的所有依赖

不想修改npm原本从官方下载包的渠道，可以使用cnpm，并且将cnpm设置为淘宝的镜像

npm install -g cnpm --registry=registry.npm.taobao.org
cnpm config get registry

npx工具

npx是npm5.2之后自带的一个命令，使用它来调用项目中的某个模块的指令
npx的原理非常简单，它会到当前目录的node_modules/.bin目录下查找对应的命令

局部命令的执行

方式一：在终端中使用如下命令（在项目根目录下） ./node_modules/.bin/webpack --version
方式二：修改package.json中的scripts "webpack": "webpack --version"
方式三：使用npx npx webpack --version

# 4. 发布自己的开发包

流程

修改为官方的地址 ( npm config set registry registry.npmjs.org/ )
创建文件夹，并创建文件 index.js，在文件中声明函数，使用 module.exports 暴露
npm 初始化工具包，package.json 填写包的信息（越复杂越容易提上去）
账号npm注册（激活账号）,==完成邮箱验证==
命令行下『npm login』填写相关用户信息 (一定要在包的文件夹下运行)
命令行下『 npm publish』提交包 👌
npm 有垃圾检测机制，如果名字简单或做测试提交，很可能会被拒绝提交，可以尝试改一下包的名称来解决这个问题