npm上有大量好用的开源包可以使用，好用的轮子可以让我们的工作事半功倍。
但在开发中有时会碰到以下情况而选择在本地项目中维护包：
- 需要修改某个包的源码；
- 出于网络等原因，包无法通过npm install 下载到本地；
- 自建的一个npm包，没有发布到npm。
本文章基于的工具版本：
- node ：v20.11.1
- npm：10.2.4
- vite：5.0.11
--这里需要注意不同的版本之间可能会有些不兼容的问题--
在本地项目中维护一个npm包
1、在根路径新建一个lib文件夹，用于管理本地包。将已安装的node_modules中的需要本地管理的包文件移动到lib文件夹下：
2、修改package.json中的包的路径。这样在通过包名使用包的时候，指向的就是本地文件路径lib/vite-plugin-qiankun
3、安装。执行npm i，lib/vite-plugin-qiankun也会被下载到node_modules中
4、运行和打包
npm run dev 运行项目，npm run build进行项目打包。
有些包在作为本地包的时候，编译可能会出错。
将node_modules中的包修改为本地包可能会碰到的问题
1、commonjs兼容问题
将vite-plugin-qiankun的包修改为本地包，运行时报错。
Uncaught (in promise) SyntaxError: The requested module '/lib/vite-plugin-qiankun/dist/helper.js?t=1732852087844' does not provide an export named 'qiankunWindow' (at axios.ts:11:10)
这个错误提示表明在使用 Vite 和 Qiankun 时，尝试从 vite-plugin-qiankun 模块中没有导出 qiankunWindow
...
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
...
查看vite-plugin-qiankun的源码。
vite-plugin-qiankun/dist/helper.js
/*!
* vite-plugin-qiankun.js v1.0.14
* (c) 2021-2022 Teng Mao Qing
* Released under the MIT License.
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var qiankunWindow = typeof window !== 'undefined' ? (window.proxy || window) : {};
var renderWithQiankun = function (qiankunLifeCycle) {
// 函数只有一次执行机会，需要把生命周期赋值给全局
if (qiankunWindow === null || qiankunWindow === void 0 ? void 0 : qiankunWindow.__POWERED_BY_QIANKUN__) {
if (!window.moudleQiankunAppLifeCycles) {
window.moudleQiankunAppLifeCycles = {};
}
if (qiankunWindow.qiankunName) {
window.moudleQiankunAppLifeCycles[qiankunWindow.qiankunName] = qiankunLifeCycle;
}
}
};
exports.default = renderWithQiankun;
exports.qiankunWindow = qiankunWindow;
exports.renderWithQiankun = renderWithQiankun;
在这里我们可以看到使用了CommonJS的导出，但是vite默认支持的是ES Module，也就无法正确解析和打包这些 CommonJS 模块。
解决方法
vite-plugin-commonjs 可以将 CommonJS 模块转换为 ES Modules，这样 Vite 就可以正常处理和打包这些模块
1、安装
要使用 vite-plugin-commonjs，首先需要安装它。你可以通过 npm 或 yarn 来安装：
npm install vite-plugin-commonjs --save-dev
# 或者
yarn add vite-plugin-commonjs --dev
2、使用
安装完成后，你需要在 Vite 的配置文件中引入和使用这个插件。以下是一个基本的配置示例：
// vite.config.js
import { defineConfig } from 'vite';
import commonjs from 'vite-plugin-commonjs';
export default defineConfig({
plugins: [
commonjs()
]
});
vite-plugin-commonjs
vite-plugin-commonjs 是一个用于 Vite 的插件，它的主要作用是帮助 Vite 构建工具处理和支持 CommonJS 模块。Vite 是一个现代前端构建工具，默认支持 ES Modules（ESM）。但是，在实际项目中，特别是当你依赖一些老旧的库时，这些库可能仍然使用 CommonJS 模块格式。这时候，vite-plugin-commonjs 就派上用场了。
主要作用
- 转换 CommonJS 模块：
-
vite-plugin-commonjs可以将 CommonJS 模块转换为 ES Modules，这样 Vite 就可以正常处理和打包这些模块。
- 兼容性提升：
-
- 通过支持 CommonJS 模块，
vite-plugin-commonjs扩展了 Vite 的兼容性，使其能够处理更多的第三方库和模块。
- 通过支持 CommonJS 模块，
- 无缝集成：
-
- 插件可以自动检测和处理 CommonJS 模块，减少了手动配置的复杂性。
兼容性和性能
- 兼容性：
vite-plugin-commonjs提升了 Vite 对于老旧库的兼容性，使得开发者可以在现代构建工具中使用更多的第三方库。 - 性能：虽然增加了一个插件，但
vite-plugin-commonjs的设计和实现考虑了性能问题，尽量减少对构建速度的影响。 - 问题参考链接：keqingrong.cn/blog/2021-1…
2、vite版本不兼容
错误信息如下：
vite.config.ts:47:7 - error TS2769: No overload matches this call. The last overload gave the following error. Type 'import("D:/mycode/vscode workplace/zqBG/gc-industry-gallery/lib/vite-plugin-qiankun/node_modules/vite/dist/node/index").PluginOption' is not assignable to type 'import("D:/mycode/vscode workplace/zqBG/gc-industry-gallery/node_modules/vite/dist/node/index").PluginOption'.
这个错误通常是因为你的项目中使用了多个不同版本的 Vite，导致类型不匹配。
解决方法：
- 检查 Vite 版本:
确保在你的项目中新安装的所有包都使用相同的 Vite 版本。你可以通过在项目根目录下运行以下命令查看 Vite 和相关插件的版本：
npm list vite
2、更新vite版本。在vite列表中发现在本地项目中的包vite-plugin-qiankun与项目的vite不一致，可选择升级本地包的vite与项目保持一致。
进入到包根路径，通过npm i 包名@版本 安装对应版本vite。
npm i vite@5.4.1
将自建的JavaScript文件作为本地的npm包
要使自建的JavaScript文件作为本地的npm包使用，需要按照以下步骤操作：
-
准备环境：确保你的本地已经安装了Node.js和npm（或yarn）。
-
初始化包：在你的JavaScript文件所在目录中，运行命令
npm init -y。这个命令会生成一个package.json文件，它是Node.js包的元数据文件。 -
配置package.json：编辑生成的package.json文件，添加必要的字段，如name（包名）、version（版本号）、description（描述）等。
-
使用你的本地包：在任何Node.js项目中，你可以通过运行
npm install .来安装你本地目录下的这个npm包。
