![「技术教程」如何在项目中使用一个自定义的npm模块 | 如何使用一个魔改后的npm模块插图 「技术教程」如何在项目中使用一个自定义的npm模块 | 如何使用一个魔改后的npm模块插图](https://blog.eswlnk.com/wp-content/uploads/wpcy/45a2dd24c85a82e6a45566cf553f960c.jpg)
前言
一般情况下确实用不到这种极端处理方案,因为有名的插件依赖,基本上能碰到的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设置全局模块:
等待设置完成后,在回到项目根目录:
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
这样就能一键实现上述效果了。
📮评论