最近在学习 npm 原理 ,把自身的疑难杂症拱了一遍。
大家都用过 npm,也都知道他是 node 的包管理器。
而在本地开发的时候,当引用自己写的功能函数的时候
总是难以避免地会写一串复杂的引用路径,比如介个样几
const util = require("../../../../util")
这么写的缺点是什么
1、难看,不利于阅读(文件到底在哪里兄弟)
2、难以维护,如果我文件路径移动了一下...所有引用的地方都要改 就算你会全局替换,摸摸你的良心说,你心里不慌吗,反正我慌得一匹
3、难写,你引用的时候,是不是要从当前文件一级级找(简直是嵌套地狱啊)
作为追求完美的我们,在自己代码里面出现这么一串恶心的东西,你能忍?
叔能忍,婶婶也忍不了了
下面就说 三 种办法,来简化我们的引用路径,变成引用 node_modules 包一样简单
const util = require("util")
Npm link 专门用于开发和调试本地 Npm 模块,能做到在不发布模块的情况下,把本地的一个正在开发的模块的源码链接到项目的 node_modules 目录下,让项目可以直接使用本地的 Npm 模块。
由于是通过软链接的方式实现的,编辑了本地的 Npm 模块代码,在项目中也能使用到编辑后的代码
别人是这么跟我说的
1、先确定你本地 包 路径,比如是 项目根目录下的 npm-link-test
2、进入 npm-link-test,新建 package.json
3、package.json 中
1、main : 你的 npm 模块入口文件名(名字随意,比如是 my-npm.js) 2、name : 你要引用的包名 名字随意,比如是 npm-link-test,引用就是 require("npm-link-test")
package.json 最终内容
{
"name":"npm-link-test",
"main":"my-npm.js",
"version":"1.0.0"
}
4、在 npm-link-test 文件夹下,执行 npm link ,把本地模块注册到全局.
5、在项目根目录下,执行 npm link npm-link-test
6、这步是把 注册到 全局的 npm 模块链接到项目中的 node_modules 下,这时你可以看到项目的node_modules 出现了 npm-link-test
7、测试一下,在根目录的 index.js 中引用 npm-link-test,然后 执行
oh,对了,我在 npm-link-test 中 导出了一个对象现在看执行结果
优点:
由于是通过软链接的方式实现,修改源文件,node_modules 中的文件也会跟着修改(挺好玩的)
缺点:
别人开发,需要也 要进行 link 步骤,才能关联包
P S
另外,说一下,npm install 的时候,会把 link 进去 node_modules 的 包删掉,暂时不知道什么原因
目测:是因为 link 的包 不存在根目录的 package.json 中,install 的时候检查时会被删掉
直接把本地模块安装到 项目的 node_modules 中,同时,也会写入 package.json 的依赖中,这样,别人clone 项目,直接安装就能使用了
1、创建 你的包目录 在项目根目录( 比如是 npm-install-test )
2、创建包入口文件 ,并命名为 install.js( 一般是写成index.js,我这样写,是为了说名字可以自定义 ),然后导出一个对象
3、创建并编辑 package.json 文件
1、main : 你的 npm 模块入口文件名(名字随意,比如是 install.js) 2、name : 你要引用的包名 名字随意,比如是 npm-install-test,引用就是 require("npm-install-test")
4、在 项目根目录 执行 npm install file:./npm-install-test
5、查看 node_modules 发现多出来一个 npm-install-test,指向上层 npm-install-test/ 文件夹的 软连接
PS npm 识别 file: 协议的 url,知道这个包要从文件系统获取,会自动创建 软连接到 node_modules中,完成安装过程
6、信息会显示添加到 根目录的 package.json 中,团队中成员 执行 npm install 就可以使用
7、测试,一切搞定啦
优点:
1、修改源文件,node_modules 中的文件也会跟着修改(也是挺好玩的)
2、别人可以直接安装使用
如果你正在使用了 webpack 的话,那么有一种更为简单的方法来简化引用路径在 webpack.config.js 中,配置 resolve 的 alias 字段即可:
包名:文件路径
module.exports = {
entry: {
app: './src/main'
},
output: {},
resolve: {
alias: {
"static": resolve('static'),
"lib": resolve('src/lib'),
"plugin": resolve('src/lib/plugin')
}
}
}
然后你就可以在文件中这么用了,比如 plugin 文件夹下有一个 time.js 文件
const time= require("plugin/time.js")
PS:什么是软链接。 硬链接 : 是指针,所有的硬链接都是指向同一个磁盘块 删除一个指针不会真正删除文件,只有把所有的指针都删除才会真正删除文件 软连接 : 是另外一种类型的文件,保存的是它指向文件的全路径, 访问时会替换成绝对路径
最近,一直在学习原理,受大佬 uncle 的影响,一直把原理的重要性牢记于心,勇踩雷区,突破盲区
我不是知识的生产者,我只是知识的搬运工,总结自己得到的,便分享自己得到的。
写文章真的太耗时了啊......但是也会强迫自己去更加深入每个知识点.....