uni-app 中，`uni_modules` 和 `node_modules`

文章目录

前言
- 一、基本概念对比
- [二、uni_modules 详解](#二、uni_modules 详解)
- - [1. **可以更改代码吗？**](#1. 可以更改代码吗？)
  - [2. **uni_modules 的结构**](#2. uni_modules 的结构)
  - [3. **uni_modules 的特点**](#3. uni_modules 的特点)
- [三、node_modules 详解](#三、node_modules 详解)
- - [1. **可以更改代码吗？**](#1. 可以更改代码吗？)
  - [2. **如果需要修改 npm 包怎么办？**](#2. 如果需要修改 npm 包怎么办？)
- 四、实际使用场景对比
- - [场景1：安装一个 UI 组件库](#场景1：安装一个 UI 组件库)
  - 场景2：安装工具函数库
- 五、最佳实践建议
- - [1. **uni_modules 管理策略**](#1. uni_modules 管理策略)
  - [2. **版本控制**](#2. 版本控制)
  - [3. **团队协作**](#3. 团队协作)
  - [4. **开发调试**](#4. 开发调试)
- 六、常见问题
- - [Q1：uni_modules 和 node_modules 冲突怎么办？](#Q1：uni_modules 和 node_modules 冲突怎么办？)
  - [Q2：如何更新 uni_modules 中的插件？](#Q2：如何更新 uni_modules 中的插件？)
  - [Q3：如何开发自己的 uni_modules 插件？](#Q3：如何开发自己的 uni_modules 插件？)
- 总结

前言

在 uni-app 中，uni_modules 和 node_modules 是两个完全不同的概念。让我详细解释它们的区别：

一、基本概念对比

特性	uni_modules	node_modules
用途	uni-app 插件系统目录	Node.js 包管理目录
存放内容	uni-app 专用插件（组件、页面、API等）	通用的 npm 包
安装方式	通过 HBuilderX 插件市场、npm 或命令行	通过 npm 或 yarn 安装
可修改性	可以修改，但需注意更新问题	不建议修改，更新会覆盖
构建处理	uni-app 编译器会特殊处理	Webpack/Vite 等构建工具处理

二、uni_modules 详解

1. 可以更改代码吗？

可以，但需要注意：

✅ 可以修改的情况：

临时调试插件
修复插件 bug
定制插件功能
学习插件源码

⚠️ 修改后的注意事项：

bash 复制代码

# 修改后的问题：
1. 插件更新会覆盖你的修改
2. 团队协作时，其他人没有你的修改
3. 没有版本管理

# 建议做法：
# 1. 复制插件到项目目录（推荐）
- 将插件从 uni_modules 复制到项目的 components/ 或 utils/ 目录
- 修改复制后的版本
- 修改引用路径

# 2. 创建本地插件
- 在项目根目录创建 nativeplugins/ 目录
- 将修改后的插件放进去
- 在 manifest.json 中配置

2. uni_modules 的结构

js 复制代码

uni_modules/
├── zhuchunyu-ui/          # 插件目录
│   ├── changelog.md      # 更新日志
│   ├── readme.md         # 说明文档
│   ├── package.json      # 插件配置
│   ├── components/       # 组件目录
│   │   └── u-button.vue
│   ├── pages/           # 页面目录
│   ├── static/          # 静态资源
│   └── uni.scss         # 样式文件

3. uni_modules 的特点

javascript 复制代码

// 1. 自动注册组件（无需 import）
// 在 pages.json 中自动注册
{
  "easycom": {
    "autoscan": true,
    "custom": {
      // 自动匹配 uni_modules 中的组件
      "zhuchunyu-(.*)": "@/uni_modules/zhuchunyu-ui/components/zhuchunyu-$1/zhuchunyu-$1.vue"
    }
  }
}

// 2. 条件编译支持
// uni_modules 中的插件可以针对不同平台编译

// 3. 插件更新机制
// 可以通过 HBuilderX 或命令行更新

三、node_modules 详解

1. 可以更改代码吗？

强烈不建议修改！

❌ 为什么不要修改 node_modules：

bash 复制代码

# 1. 更新会覆盖
npm install 或 npm update 会覆盖修改

# 2. 协作问题
团队成员安装的版本与你的不同

# 3. 版本控制问题
node_modules 通常不提交到 git

# 4. 依赖关系
修改可能破坏其他依赖

2. 如果需要修改 npm 包怎么办？

javascript 复制代码

// 方法1：fork 并发布私有包（推荐）
1. fork 原项目到自己的仓库
2. 进行修改
3. 发布到私有 npm 仓库
4. 修改 package.json
"dependencies": {
  "package-name": "git+https://your-repo.git"
}

// 方法2：使用 patch-package
1. 安装 patch-package
npm install patch-package --save-dev

2. 修改 node_modules 中的代码
3. 创建补丁
npx patch-package package-name

4. 在 package.json 中添加脚本
"scripts": {
  "postinstall": "patch-package"
}

四、实际使用场景对比

场景1：安装一个 UI 组件库

bash 复制代码

# uni_modules 方式（uni-app 插件）
1. 通过 HBuilderX 插件市场安装
2. 或：npm install @dcloudio/uni-ui
3. 自动注册，开箱即用

# node_modules 方式（普通 npm 包）
1. npm install vant-weapp
2. 需要手动配置
3. 可能需要额外的构建配置

场景2：安装工具函数库

javascript 复制代码

// uni_modules 中的工具库
// 1. 自动挂载到 uni 对象
uni.$utils.formatDate()

// node_modules 中的工具库
// 1. 需要导入
import { formatDate } from 'date-fns'
// 2. 或挂载到全局
Vue.prototype.$formatDate = formatDate

五、最佳实践建议

1. uni_modules 管理策略

javascript 复制代码

// 项目结构建议
project/
├── uni_modules/          # 插件（可修改，但需谨慎）
│   ├── zhuchunyu-ui/    # UI 组件库
│   └── uni-data-check/  # 数据校验
├── components/          # 自定义组件（推荐放这里）
├── utils/              # 工具函数
├── static/             # 静态资源
└── node_modules/       # npm 包（不要修改）

// 如果必须修改 uni_modules 插件：
1. 复制到 components/custom/ 目录
2. 修改引用路径
3. 添加注释说明修改原因

2. 版本控制

json 复制代码

// .gitignore 配置
node_modules/     # 忽略
uni_modules/      # 不忽略（插件是项目一部分）

// 但注意：uni_modules 可能很大
// 可以在 .gitignore 中忽略特定插件的更新
uni_modules/*/node_modules/
uni_modules/*/package-lock.json

3. 团队协作

bash 复制代码

# 1. 统一插件版本
# 在 package.json 中指定版本
"uni-app": {
  "scripts": {},
  "plugins": {
    "zhuchunyu-ui": {
      "version": "1.0.0"
    }
  }
}

# 2. 使用 lock 文件
# 提交 uni_modules 的版本锁文件

4. 开发调试

javascript 复制代码

// 调试 uni_modules 插件
// 1. 创建本地插件链接
cd /path/to/your-plugin
npm link

cd /path/to/your-project
npm link your-plugin-name

// 2. 使用符号链接
// 在项目中创建软链接到插件目录
ln -s /path/to/plugin ./uni_modules/plugin-name

六、常见问题

Q1：uni_modules 和 node_modules 冲突怎么办？

javascript 复制代码

// 如果同一个包在两个地方都存在
// 优先使用 uni_modules
// 因为 uni-app 会优先查找 uni_modules

Q2：如何更新 uni_modules 中的插件？

bash 复制代码

# 方法1：通过 HBuilderX
# 插件市场 -> 更新

# 方法2：命令行
npm update @dcloudio/uni-ui

# 方法3：删除重装
rm -rf uni_modules/plugin-name
npm install plugin-name

Q3：如何开发自己的 uni_modules 插件？

bash 复制代码

# 1. 创建插件模板
# 通过 HBuilderX 创建

# 2. 目录结构
my-plugin/
├── package.json
├── components/
├── pages/
└── readme.md

# 3. 发布
# 到插件市场或私有 npm

总结

方面	uni_modules	node_modules
修改代码	可以，但不推荐直接修改	强烈不建议修改
更新影响	更新会覆盖修改	更新会覆盖修改
推荐做法	复制到项目目录再修改	fork 或使用 patch-package
版本控制	建议提交到 git	不要提交到 git
用途	uni-app 专用插件	通用 JavaScript 库

核心建议：

uni_modules 中的插件可以按需修改，但最好复制到项目目录
node_modules 中的包永远不要直接修改
使用版本控制工具管理修改
团队协作时要有明确的规范