【npm】简化本地文件引用路径

最近在学习 npm 原理 ，把自身的疑难杂症拱了一遍。

大家都用过 npm，也都知道他是 node 的包管理器。

而在本地开发的时候，当引用自己写的功能函数的时候

总是难以避免地会写一串复杂的引用路径，比如介个样几

const util = require("../../../../util")

这么写的缺点是什么

1、难看，不利于阅读（文件到底在哪里兄弟）

2、难以维护，如果我文件路径移动了一下...所有引用的地方都要改 就算你会全局替换，摸摸你的良心说，你心里不慌吗，反正我慌得一匹

3、难写，你引用的时候，是不是要从当前文件一级级找（简直是嵌套地狱啊）

作为追求完美的我们，在自己代码里面出现这么一串恶心的东西，你能忍？

叔能忍，婶婶也忍不了了

下面就说 三 种办法，来简化我们的引用路径，变成引用 node_modules 包一样简单

const util = require("util")

1Npm Link

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 的时候检查时会被删掉

2Npm 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、别人可以直接安装使用

3Webapck - alias

如果你正在使用了 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：什么是软链接。 硬链接 : 是指针，所有的硬链接都是指向同一个磁盘块 删除一个指针不会真正删除文件，只有把所有的指针都删除才会真正删除文件 软连接 : 是另外一种类型的文件，保存的是它指向文件的全路径， 访问时会替换成绝对路径

4神仙朱说

最近，一直在学习原理，受大佬 uncle 的影响，一直把原理的重要性牢记于心，勇踩雷区，突破盲区

我不是知识的生产者，我只是知识的搬运工，总结自己得到的，便分享自己得到的。

写文章真的太耗时了啊......但是也会强迫自己去更加深入每个知识点.....