前端模块化和包管理器模块化和包管理器模块化为什么需要？当前端工程到达一定规模后，就会出现下面的问题：全局变量

模块化和包管理器

模块化

为什么需要？

当前端工程到达一定规模后，就会出现下面的问题：

全局变量污染 — > 不敢随意的起变量名
依赖混乱 — > 出现交叉依赖

这两个问题限制着：代码文件难以细分。模块化就是为了解决这个两个问题的。

有了模块化，就能将代码拆分到各个小文件中。便于以后维护管理。

前端模块化标准：

两大模块化保准：

模块的缓存机制：

粗略解释：（了解大致的原理即可）

模块会进行缓存，实质上维护了一张表，里面存放键值对，是路径和对应模块的导出的对应关系。

'path1':xxx,
'path2':xxx,
 ...

每次导入会首先到表中查找，如果没有才去执行对应模块，然后缓存。下次直接拿缓存。

Common JS

导入：require(" ... ")

导出：module.exports = ...

ES Module

导入：import

import '相对路径' // 仅运行一次该模块，不导入任何内容
import {a,b} from '模块路径' // 导入属性 a,b 放到变量 a,b 中。
import c from '模块路径' // 导入属性 default ，放到变量 c 中。
import c,{a,b as f} from '模块路径' // default->c , a->a , b->f 区别名。
import * as obj from '模块路径' // 将模块对象放入 对象 obj 中。
obj = {
    default:xxx,
    a:xxx,
    b:xxx,
    ...
}
// 具名的用{ }，括起来。
// 默认的不用括。
// 可以用 as 取别名
// 可以把全部导出对象 导入到 obj,然后使用。
// 可以直接凹入一个路径，表示直接运行该模块的代码。不导入任何内容。

导出：export

具名导出：普通导出，可以导出多个。

默认导出，只能导出一个。

export const a = 1;// 具名，常用
export function b(){} ;//具名
export const c = ()=>{} //具名

export default 3 // 默认，常用
export default function(){} // 默认，常用
export {a as default}// 默认
export {f,g,h as default} // 具名 + 默认

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

总结：

把模块化类比函数 就很简单了。相当于圈了一块自己的作用域名自己用，如果外面的要用就导出。防止污染全局变量。
require（）== 调用函数
module.epors == return

包和包管理器:

什么是包？

包（package）是一个或多个 js模块的集合。他们共同完成某一类功能。
可以简单的理解成一个项目就是一个包，里面包括了好多模块，一个js 文件就是一个模块。
有些包是为了开发出来给别人使用的，这种包也叫第三方模块。

有了模块化后，前端就也能写一些很复杂的项目了。

包的分类：

项目包：(本地安装)

普通包（项目运行依赖的，没有他项目无法成功运行）

开发包（开发阶段的工具，让我们更爽的写代码）

全局包：（全局安装）

需要想要在任何目录使用某个包提供的命令时。

什么是包管理器？

包管理器是一个管理包的工具，前端常见的包管理器有 npm ,yarn ,cnpm ,pnpm。

包管理器的作用：

让开发者可以轻松的下载包 / 更新包 / 下载包。
可以自动管理包的依赖。

我们日常使用包管理器就是通过 cli 。

什么是 cli ?

Cli 是一个命令行工具，它提供一个终端命令。通过该命令可以完成一些功能，包的管理。

常见的包管理的操作：

包源的管理：

查看源：npm config get registry
配置源：npm config set registry …

包的管理

安装：npm install [-D] [-g] 包名[@版本号]
卸载：nom uninstall
查包的信息：npm view 包名 version

注意：

项目包，会安装到项目的 node_modues 文件夹中。

全局包，会见包安装到一个本机的一个全局的位置。

只需要使用某个全局命令时，才需要全局安装。

Package.json

作用：记录项目信息和项目中用到的包的信息。

Package.json举例：

{
  "name": "blog",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
      ...
  },
  "dependencies": {
    "axios": "^1.12.2",
     ...
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.14",
    "@types/node": "^24.6.0",
     ...
  }
}

重点学习scripts 配置项：

脚本script 属性名：配置对应的执行脚本。然后使用 npm run + 脚本属性名，即可运行对应的脚本。

如果脚本属性名是 start ，可以省略 run ，即 npm 脚本属性名。

{
  ...
  "scripts": {
    "dev": "vite",
      ...
  },
  ...
}
 // npm run dev === vite

前端开发流程

有了模块化，有了包管理。前端的复杂项目开发就方便多了～

常见的开发流程：

创建工程：npm init
初始化本地仓库：git init
添加 .gitignore 文件
git 提交
关联远程仓库，并推送到远程仓库。
新建index.js（即写模块）

7.设置 package.json 的脚本 script,用于运行 index.js

开始干活 …
运行脚本，查看效果。
开发完成，提交，然后推送到远程仓库。
删除本地工程。
其他小伙伴想查看获取项目。
从远程仓库拉取项目代码：git clone
还原依赖：npm install
重新运行。

题外话：Qrcode 是一个生成二维码的包。# Tinymce

前端模块化和包管理器

模块化 和 包管理器

模块化