前端工程师必须掌握的几种文件路径知识

前言

之前在做webpack配置时候多次用到路径相关内容。最近在写项目的时候&＃xff0c;有一个文件需要上传到阿里云oss的功能&＃xff0c;同时本地服务器也需要保留一个文件备份。多次用到了文件路径相关内容以及Node核心API的path模块&＃xff0c;所以系统的学习了一下&＃xff0c;整理了这篇文章。

node中的路径分类

node中的路径大致分5类&＃xff0c;dirname,filename,process.cwd(),./,../,其中dirname,filename,process.cwd()绝对路径

通过代码对每个分类进行说明&＃xff1a;

文件目录结构如下&＃xff1a;

代码pra/
- node核心API/
- fs.js
- path.js


path.js中的代码

const path &＃61; require(&＃39;path&＃39;);
console.log(__dirname);
console.log(__filename);
console.log(process.cwd());
console.log(path.resolve(&＃39;./&＃39;));


在代码pra目录下运行命令 node node核心API/path.js&＃xff0c;我们可以看到结果如下&＃xff1a;

/koala/Desktop/程序员成长指北/代码pra/node核心API
/koala/Desktop/程序员成长指北/代码pra/node核心API/path.js
/koala/Desktop/程序员成长指北/代码pra
/koala/Desktop/程序员成长指北/代码pra


然后我们有可以在node核心API目录下运行这个文件&＃xff0c;node path.js,运行结果如下&＃xff1a;

/koala/Desktop/程序员成长指北/代码pra/node核心API
/koala/Desktop/程序员成长指北/代码pra/node核心API/path.js
/koala/Desktop/程序员成长指北/代码pra/node核心API
/koala/Desktop/程序员成长指北/代码pra/node核心API


对比输出结果&＃xff0c;暂时得到的结论是

• __dirname: 总是返回被执行的 js 所在文件夹的绝对路径

• __filename: 总是返回被执行的 js 的绝对路径

• process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径

• ./: 跟 process.cwd() 一样&＃xff0c;返回 node 命令时所在的文件夹的绝对路径

为什么说上面是暂时得到的结论&＃xff0c;因为是有错误的&＃xff0c;再看一段代码&＃xff1a;我们在path.js中加上这句代码

exports.A &＃61; 1;


之前直接通过readFile读取文件路径报错&＃xff0c;

fs.readFile(&＃39;./path.js&＃39;,function(err,data){

});


现在在刚才报错的fs.js里面加这两句代码看看&＃xff1a;

const test &＃61; require(&＃39;./path.js&＃39;);
console.log(test)


在代码pra/目录下运行node node核心API/fs.js&＃xff0c;最后查看结果&＃xff0c;说明是可以访问到的&＃xff1a;

{ A: 1 }


那么关于 ./正确的结论是&＃xff1a;

在 require()中使用是跟__dirname 的效果相同&＃xff0c;不会因为启动脚本的目录不一样而改变&＃xff0c;在其他情况下跟 process.cwd() 效果相同&＃xff0c;是相对于启动脚本所在目录的路径。

路径知识总结&＃xff1a;

• __dirname&＃xff1a;获得当前执行文件所在目录的完整目录名

• __filename&＃xff1a;获得当前执行文件的带有完整绝对路径的文件名

• process.cwd()&＃xff1a;获得当前执行node命令时候的文件夹目录名

• ./&＃xff1a;不使用require时候&＃xff0c;./与process.cwd()一样&＃xff0c;使用require时候&＃xff0c;与__dirname一样

只有在 require() 时才使用相对路径(./, ../) 的写法&＃xff0c;其他地方一律使用绝对路径&＃xff0c;如下&＃xff1a;

// 当前目录下
path.dirname(__filename) &＃43; &＃39;/path.js&＃39;;
// 相邻目录下
path.resolve(__dirname, &＃39;../regx/regx.js&＃39;);


path

前面讲解了路径的相关比较&＃xff0c;接下来单独聊聊path这个模块&＃xff0c;这个模块在很多地方比较常用&＃xff0c;所以&＃xff0c;对于我们来说&＃xff0c;掌握他&＃xff0c;对我们以后的发展更有利&＃xff0c;不用每次看webpack的配置文件还要去查询一下这个api是干什么用的&＃xff0c;很影响我们的效率

这是api官网地址:https://nodejs.org/api/path.html

个人认为官网中的api没有必要都掌握&＃xff0c;下面会对一些常用的api进行讲解&＃xff0c;我经常用到的&＃xff0c;或者作为一个前端开发工程师在webpack等工程配置的时候经常用到的。

path.normalize

举例说明

const path &＃61; require(&＃39;path&＃39;);

console.log(path.normalize(&＃39;/koala/Desktop//程序员成长指北//代码pra/..&＃39;));


规范后的结果

/koala/Desktop/程序员成长指北/代码pra


作用总结

规范化路径&＃xff0c;把不规范的路径规范化。

path.join

举例说明&＃xff1a;

const path &＃61; require(&＃39;path&＃39;);
console.log(path.join(&＃39;src&＃39;, &＃39;task.js&＃39;));

const path &＃61; require(&＃39;path&＃39;);
console.log(path.join(&＃39;&＃39;));


转化后的结果

src/task.js
.


作用总结

path.join([...paths])

1. 传入的参数是字符串的路径片段&＃xff0c;可以是一个&＃xff0c;也可以是多个

2. 返回的是一个拼接好的路径&＃xff0c;但是根据平台的不同&＃xff0c;他会对路径进行不同的规范化&＃xff0c;举个例子&＃xff0c;Unix系统是/&＃xff0c;Windows系统是\&＃xff0c;那么你在两个系统下看到的返回结果就不一样。

3. 如果返回的路径字符串长度为零&＃xff0c;那么他会返回一个.&＃xff0c;代表当前的文件夹。

4. 如果传入的参数中有不是字符串的&＃xff0c;那就直接会报错

path.parse

举例说明

const path &＃61; require(&＃39;path&＃39;);
console.log(path.parse(&＃39;/koala/Desktop/程序员成长指北/代码pra/node核心API&＃39;));


运行结果

{ root: &＃39;/&＃39;,
dir: &＃39;/koala/Desktop/程序员成长指北/代码pra&＃39;,
base: &＃39;node核心API&＃39;,
ext: &＃39;&＃39;,
name: &＃39;node核心API&＃39;
}


作用总结

他返回的是一个对象&＃xff0c;那么我们来把这么几个名词熟悉一下&＃xff1a;

1. root&＃xff1a;代表根目录

2. dir&＃xff1a;代表文件所在的文件夹

3. base&＃xff1a;代表整一个文件

4. name&＃xff1a;代表文件名

5. ext: 代表文件的后缀名

path.basename

举例说明

const path &＃61; require(&＃39;path&＃39;);
console.log(path.basename(&＃39;/koala/Desktop/程序员成长指北/代码pra/node核心API&＃39;));
console.log(path.basename(&＃39;/koala/Desktop/程序员成长指北/代码pra/node核心API/path.js&＃39;, &＃39;.js&＃39;));


运行结果

看了上面代码的例子&＃xff0c;我想应该知道了basename结果&＃xff0c;嘿嘿。

node核心API
path


作用总结

basename接收两个参数&＃xff0c;第一个是path&＃xff0c;第二个是ext(可选参数)&＃xff0c;当输入第二个参数的时候&＃xff0c;打印结果不出现后缀名

path.dirname

举例说明

const path &＃61; require(&＃39;path&＃39;);
console.log(path.dirname(&＃39;/koala/Desktop/程序员成长指北/代码pra/node核心API&＃39;));


运行结果

/koala/Desktop/程序员成长指北/代码pra


作用总结

返回文件的目录完整地址

path.extname

举例说明

const path &＃61; require(&＃39;path&＃39;);
path.extname(&＃39;index.html&＃39;);
path.extname(&＃39;index.coffee.md&＃39;);
path.extname(&＃39;index.&＃39;);
path.extname(&＃39;index&＃39;);
path.extname(&＃39;.index&＃39;);


运行结果

.html
.md
.
&＃39;&＃39;
&＃39;&＃39;


作用总结

返回的是后缀名&＃xff0c;但是最后两种情况返回&＃39;&＃39;,大家注意一下。

path.resolve

举例说明

const path &＃61; require(&＃39;path&＃39;);
console.log(path.resolve(&＃39;/foo/bar&＃39;, &＃39;/bar/faa&＃39;, &＃39;..&＃39;, &＃39;a/../c&＃39;));


输出结果

/bar/c


作用总结

path.resolve([...paths])

path.resolve就相当于是shell下面的cd操作&＃xff0c;从左到右运行一遍cd path命令&＃xff0c;最终获取的绝对路径/文件名&＃xff0c;这个接口所返回的结果了。但是resolve操作和cd操作还是有区别的&＃xff0c;resolve的路径可以没有&＃xff0c;而且最后进入的可以是文件。具体cd步骤如下

cd /foo/bar/ //这是第一步, 现在的位置是/foo/bar/
cd /bar/faa //这是第二步&＃xff0c;这里和第一步有区别&＃xff0c;他是从/进入的&＃xff0c;也就时候根目录&＃xff0c;现在的位置是/bar/faa
cd .. //第三步&＃xff0c;从faa退出来&＃xff0c;现在的位置是 /bar
cd a/../c //第四步&＃xff0c;进入a&＃xff0c;然后在推出&＃xff0c;在进入c&＃xff0c;最后位置是/bar/c


path.relative

举例说明

const path &＃61; require(&＃39;path&＃39;);

console.log(path.relative(&＃39;/data/orandea/test/aaa&＃39;, &＃39;/data/orandea/impl/bbb&＃39;));

console.log(path.relative(&＃39;/data/demo&＃39;, &＃39;/data/demo&＃39;));

console.log(path.relative(&＃39;/data/demo&＃39;, &＃39;&＃39;));


运行结果

../../impl/bbb
""
../../koala/Desktop/程序员成长指北/代码pra/node核心API


作用总结

path.relative(from, to)

描述&＃xff1a;从from路径&＃xff0c;到to路径的相对路径。

边界&＃xff1a;

• 如果from、to指向同个路径&＃xff0c;那么&＃xff0c;返回空字符串。

• 如果from、to中任一者为空&＃xff0c;那么&＃xff0c;返回当前工作路径。

总结

本篇文章关于路径的知识就说到这里&＃xff0c;基础很重要的&＃xff0c;既能节约开发时间&＃xff0c;又能减少报错。

❤️ 看完三件事

如果你觉得这篇内容对你挺有启发&＃xff0c;我想邀请你帮我三个小忙&＃xff1a;

1. 点个「在看」&＃xff0c;让更多的人也能看到这篇内容&＃xff08;喜欢不点在看&＃xff0c;都是耍流氓 -_-&＃xff09;

2. 关注我的博客 https://github.com/SHERlocked93/blog&＃xff0c;让我们成为长期关系

3. 关注公众号「前端下午茶」&＃xff0c;持续为你推送精选好文&＃xff0c;也可以加我为好友&＃xff0c;随时聊骚。

在看点这里