「技术教程」如何在项目中使用一个自定义的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

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