Node 源项目定制化、打包并使用全过程讲解

‍ 热爱摄影的程序员
‍ 喜欢编码的设计师
擅长设计的剪辑师
‍ 一位高冷无情的编码爱好者
大家好，我是全栈工程师
欢迎分享 / 收藏 / 赞 / 在看！

【需求】

在使用 VitePress 制作个人文档时，发现官方提供的组件非常不好用，虽然说他们也提供了足够强大的扩展功能，但是定制化始终不尽如人意，满足不了笔者的需求。

好在官方提供了源代码，因此我们就需要在源代码上定制修改，再打包，最后在我们的项目中引入并使用。

此教程涵盖最常见的 Node 源项目（如：Element Plus、uView 等）定制、打包并使用的过程。

【解决】

1 下载源代码至本地

从 GitHub 上下载 VitePress 官方源码至本地：GitHub-VitePress。

使用 WebStorm 等 IDE 打开，打开 package.json 文件，观察文件结构。

养成一个习惯，在修改源代码前先创建一个新的 Git 分支，这边以 dev 为例，并切换至该分支上：

这边使用的是 pnpm 作为包管理器，因此在根目录下使用命令 pnpm install 安装项目依赖：

2 个性修改代码

这里以文件 VPFooter.vue 为例，笔者添加了几个 1 作为区分：

3 项目整合并打包

打开 package.json 文件，可以看到 build 执行内容，在项目根路径下执行命令 pnpm run build 将修改后的项目打包，可以看到生成的
dist 文件夹：

打包后光有 dist 目录是不够的，完整的还需要相关启动脚本等文件，由于没有看到执行打包后生成的完整内容，因此从正常的
VitePress 项目中的 node_modules 中的 vitepress 目录拷贝出来，并将上一步打包生成的 dist 目录替换进去，整合构成新的文件夹，起名为
vitepress：

4 项目中引入并使用

在 Node 项目中引入自己修改的源码有三种方式（以上面的修改过后并整合的的 vitepress 项目为例，注意在要使用的项目上线提前使用命令
npm uninstall vitepress 卸载相应的 vitepress 依赖）：

1. 直接将 vitepress 文件夹拷贝到自己的项目中使用。例如拷贝至自己项目根路径的 deps 目录下，则需要在 package.json 文件中的
   depedencies 添加，再使用命令 npm install 安装依赖：

"dependencies": {
"vitepress": "file:deps/vitepress"
}

2. 将 vitepress 文件夹打包，并拷贝到自己的项目中使用。优点是体积小，可以避免修改到里面的源码。

# 注意是在 vitepress 的同级目录下执行打包，-C 可以避免再生成一层 vitepress 目录
tar -acvf vitepress.tar.gz -C ./vitepress .

例如拷贝至自己项目根路径的 deps 目录下，则需要在 package.json 文件中的 depedencies 添加，再使用命令 npm install 安装依赖：

"dependencies": {
"vitepress": "file:deps/vitepress.tag.gz"
}

3. 使用 GitHub 链接。

在 GitHub 中新建仓库 vitepress 并将 vitepress 文件夹上传过去（这里可以起一个 tag 做一下标记）：

在 package.json 文件中的 depedencies 添加之前步骤中仓库的链接（有 tag 的记得带上），再使用命令 npm install 安装依赖：

"dependencies": {
"vitepress": "github:hongyoudan/vitepress#"
}

最终效果：