模块化学习

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.npmmirror.com
• 配置官方源 => 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

Windows系统下安装nvm

• nvm全称为node version manger，顾名思义就是管理node版本的一个工具，通过这个工具，我们可以在一台计算机上安装多个版本的node，并且随时进行无缝的切换。

1. 卸载原本的node.js 如果之前有安装过node.js，那么首先需要卸载之前的安装
2. 下载安装nvm
3. 修改nvm源

• 如果直接使用nvm命令下载node的话，因为源在国外，所以会导致下载失败，所以我们最好修改nvm的源
• 打开nvm的下载路径，如果你是一路next，那么就会在：C:\Users\用户名\AppData\Roaming\nvm
• 打开setting.txt文件，在末尾写入：
• node_mirror: https://npmmirror.com/mirrors/node/
• npm_mirror: https://npmmirror.com/mirrors/npm/

4. nvm常用命令

# 查看当前安装和使用的 node 版本
nvm list

# 安装某个 node 版本
nvm install 版本号

# 切换 node 版本
nvm use 版本号

# 设置默认版本
nvm alias v20.11.1

5. 配置 npm 源

• 安装 node 之后，一般对应的 npm 也会被安装好，但是默认 npm 的源是指向 npm 官网的，这就导致我们在下载包的时候会很慢。
• 所以我们需要修改 npm 的源

npm config set registry https://registry.npmmirror.com
npm config get registry