CommonJS

• 全局变量污染
• 依赖混乱

模块化的标准：

1. CommonJS CMJ 社区标准 node环境
2. ES Module ESM 官方标准

CMJ规范：

1. 所有的 js 文件都是一个模块 运行的模块 入口模块
2. 所有的模块中的全局变量、函数，均不会产生污染
3. 当一个模块需要提供一些东西给别的函数时，需要将这些东西导出module.exports
4. 模块需要其他模块的东西时，需要进行导入 require(“路径”) 路径必须以 ./ 或 …/ 开头
5. 模块有缓存，第一次运行模块后，导出结果会被缓存，之后再使用该模块，直接使用缓存结果

• 导出方式 => module.exports = 模块导出的值
• 导入方式 => require("模块路径")

ES Module

标准类型：官方标准

支持环境：node 、浏览器

依赖类型：静态依赖、动态依赖

• 导出方式：

1. 具名导出（普通导出），可以导出多个
2. 默认导出，只能导出一个

• 一个模块可以同时存在两种导出方式，最终会合并为一个【对象】导出

export const a = 1; //具名，常用
export function b() {}  //具名，常用
export function c() {}  //具名，常用
const d = 100;
export { d } // 具名
const e = 200;
export { e as temp } //具名// export default 3 默认导出
// export default function() {}  默认导出
// const f = 16;
// export { f as default } 基本 + 默认const q = 7, w = 8,  p = 9;
export { q, w, p as default } // 基本 + 默认// 上述代码将导出下面的对象
/*
{a: 1,b: fn,c: fn,d: 100,temp: 200,q: 7,w: 8,default: 9
}
*/

**PS: 导出代码必须为顶级代码，即不可放到代码块中 **

• 导入方式：针对具名导出和默认导出，有不同的导入语法

// 仅运行一次该模块，不导入任何内容
import "模块路径"
// 常用，导入属性 a、 b,放到变量a、b中。a->a, b->b
import { a, b } from "模块路径"
// 常用，导入属性 default, 放到变量 c 中。default->c
import c from "模块路径"
// 常用，default->c ,a->a, b->b
import c, { a, b } from "模块路径"
// 常用，将模块对象放入到变量obj中
import * as obj from "模块路径"// 导入属性a 、 b，放到变量temp1、 temp2中
import { a as temp1, b as temp2 } from "模块路径"
// 导入属性default,放入到变量a中，default是关键字，不能作为变量名，必须定义别名
import { default as a } from "模块路径"
// 导入属性default 、b,放入到变量a、b中
import { default as a, b } from "模块路径"
// 以上均为静态导入import("模块路径") // 动态导入，返回一个Promise,完成时的数据为模块对象

PS：静态导入的代码必须在代码顶端，不可放入代码块中

另外，静态导入的代码绑定的符号是常量，不可更改

包管理器

什么是包？

• 包（package）是一个或多个js模块的集合，它们共同完成某一类功能
• 可以简单的认为每一个工程就是一个包
• 有些包是为了给别人用的，这种包也叫第三方库

什么是包管理器？

• 包管理器是一个管理包的工具，前端常见的包管理器有npm、yarn、cnpm、pnpm等
• 包管理器具有以下能力：

1. 让开发者可以轻松的下载包
2. 让开发者可以轻松的升级和卸载包
3. 能够自动管理包的依赖

什么是cli

• cli是一个命令行工具，它提供一个终端命令，通过该命令可以完成一些功能

node查找包的顺序

• require(“a”)

1. 查找是否有内置模块a
2. 查找当前目录的node_modules中是否有a
3. 依次查找上级目录的node_modules中是否有a，直到根目录

配置源

• 查看源 => npm config get registry
• 配置淘宝镜像源 => npm config set registry https://registry.npm.taobao.org
• 配置官方源 => npm config set registry https://registry.npmjs.org/

初始化

• npm init => 初始化工程，帮助生成 package.json 文件
• npm init -y => 初始化工程，全部使用默认配置生成 package.json 文件

package.json

{"dependencies":{ // 本地普通依赖"qrcode": "^1.4.4" // 依赖包qrcode,版本1.4.4,主版本号不变，该版本号和补丁版本可增},"devDenpendencies": { // 开发依赖"webpack": "^5.0.0"}
}

安装

本地安装

• 会将包下载到当前命令行所在目录的node_modules中
• 绝大部分安装都是用本地安装

# 下面的 install 可以替换为 i
npm install 包名
npm install --save 包名
npm install 包名@版本号

• 若仅作为开发依赖，则添加参数 -D

# 下面的 install 可以替换为 i
npm install -D 包名
npm install -D 包名@版本号

• 若要还原安装

# 下面的 install 可以替换为 i
npm install 
npm install --production # 仅还原dependencies中的依赖

全局安装

• 会将包下载到一个全局的位置
• 只有需要使用某个全局命令时，才需要进行全局安装

# 下面的 install 可以替换为 i
npm install -g 包名
npm install -g 包名@版本号

卸载

本地卸载

• 卸载本地的安装包

# 下面的 uninstall 可以替换为 un
npm uninstall 包名

全局卸载

• 卸载全局的安装包

# 下面的 uninstall 可以替换为 un
npm uninstall -g 包名

查看包信息

查看包所有的版本

# view 可以替换为 v
npm view 包名 versions