「技术教程」如何在项目中使用一个自定义的npm模块 | 如何使用一个魔改后的npm模块

前言

一般情况下确实用不到这种极端处理方案，因为有名的插件依赖，基本上能碰到的bug情况是非常少见的。

这篇文章解决的问题是：

将 node_modules 中的模块自己修改后，又不想影响全局引入方式，或者说不方便去修改该模块的引入的时候使用的。

教程中使用的是pnpm方式，如果你使用npm或者yarn，原理是一样的，可以参考完再自己去看对应的命令使用方式，大差不差的。

教程

假设我们已经将模块自己改好并打包好了，此时我们一般会得到一个dist目录，这个是模块打包后的产物，假设这个模块在node_modules中的文件夹夹名字是test，那么你就需要将dist放置在自己新创建的test目录下，注意一般还有一个package.json文件，这个必须是在test根目录下存放（入口）。

大部分情况下这个package.json是共享的，你自己将模块项目中的package.json复制到test目录下即可。

当然这种方式不适用于所有情况，这个需要取决于模块的打包处理方式，dist也不一定就一定要在test目录下，这个要看package.json中的配置。

这里就不细说了，这不是本文重点。

假设我们已经正确得到了修改后的模块内容，我们可以将其存放在项目目录下，我是放在项目根路径下的my_modules目录中。

/my_modules/test
            ---- dist
            ---- package.json

下面就准备将test设置全局模块：

# 先进入到魔改的test模块目录下
cd 项目根目录/my_modules/test

# 使用link
pnpm link --global

等待设置完成后，在回到项目根目录：

cd 项目根目录

pnpm link --global test

注意 --global后面接的test就是刚刚link的目录名。

此时我们就实现了将项目中node_modules 里面的test硬链接成了/my_modules/test魔改的模块。

注意完事后不要重新安装依赖了，安装了你又得来一遍上述操作。

此时我们不管是dev启动项目，还是build打包，都会使用的魔改后的内容。

这种方式可以用于临时解决问题，短期内的方案。

bash脚本自动替换

由于每次pnpm i安装依赖就要这么处理一次，有点麻烦，所以我写了个脚本，目前测试windows和linux都是可以使用的，注意的是windows请用bash命令程序，比如git Bash运行。

#!/bin/bash

# 获取脚本所在的目录
SCRIPT_DIR=$(cd "$(dirname "${BASH_SOURCE[0]}")" &> /dev/null && pwd)

# 替换这里的路径为你需要的第一个目录路径
first_directory_path="$SCRIPT_DIR/my_modules/test"
# 替换这里的路径为你需要的第二个目录路径
second_directory_path=$SCRIPT_DIR

# 切换到第一个目录
cd "$first_directory_path" || exit
# 在第一个目录中运行pnpm link --global
pnpm link --global

# 切换到第二个目录
cd "$second_directory_path" || exit
# 在第二个目录中运行pnpm link --global vuetify-notifier
pnpm link --global vuetify-notifier

自己替换first_directory_path路径，然后保存为：fix.sh文件。

linux需要用下面的命令提权，以防无法调用成功。

chmod +x ./fix.sh

这样给脚本提供权限，然后运行它：./fix.sh。

如果是windows，一般不需要提权，直接运行：./fix.sh

这样就能一键实现上述效果了。