做为一个前端工程师也要掌握的几种文件路径知识

图片描述

前言

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

node中的路径分类

node中的路径大体分5类,dirname,filename,process.cwd(),./,../,其中dirname,filename,process.cwd()绝对路径html

经过代码对每一个分类进行说明:前端

文件目录结构以下:java

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

path.js中的代码node

const path = require('path');
console.log(__dirname);
console.log(__filename);
console.log(process.cwd());
console.log(path.resolve('./'));

在代码pra目录下运行命令 node node核心API/path.js,咱们能够看到结果以下:webpack

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

而后咱们有能够在node核心API目录下运行这个文件,node path.js,运行结果以下:程序员

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

对比输出结果,暂时获得的结论是web

  • __dirname: 老是返回被执行的 js 所在文件夹的绝对路径
  • __filename: 老是返回被执行的 js 的绝对路径
  • process.cwd(): 老是返回运行 node 命令时所在的文件夹的绝对路径
  • ./: 跟 process.cwd() 同样,返回 node 命令时所在的文件夹的绝对路径

为何说上面是暂时获得的结论,由于是有错误的,再看一段代码:
咱们在path.js中加上这句代码shell

exports.A = 1;

以前直接经过readFile读取文件路径报错,api

fs.readFile('./path.js',function(err,data){
   
});

如今在刚才报错的fs.js里面加这两句代码看看:

const test = require('./path.js');
console.log(test)

代码pra/目录下运行node node核心API/fs.js,最后查看结果,说明是能够访问到的:

{ A: 1 }

那么关于 ./ 正确的结论是:

require() 中使用是跟 __dirname 的效果相同,不会由于启动脚本的目录不同而改变,在其余状况下跟 process.cwd() 效果相同,是相对于启动脚本所在目录的路径。

路径知识总结:

  • __dirname: 得到当前执行文件所在目录的完整目录名
  • __filename: 得到当前执行文件的带有完整绝对路径的文件名
  • process.cwd():得到当前执行node命令时候的文件夹目录名
  • ./: 不使用require时候,./process.cwd()同样,使用require时候,与__dirname同样

只有在 require() 时才使用相对路径(./, ../) 的写法,其余地方一概使用绝对路径,以下:

// 当前目录下
 path.dirname(__filename) + '/path.js'; 
// 相邻目录下
 path.resolve(__dirname, '../regx/regx.js');

path

前面讲解了路径的相关比较,接下来单独聊聊path这个模块,这个模块在不少地方比较经常使用,因此,对于咱们来讲,掌握他,对咱们之后的发展更有利,不用每次看webpack的配置文件还要去查询一下这个api是干什么用的,很影响咱们的效率

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

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

path.normalize

举例说明

const path = require('path');

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

规范后的结果

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

做用总结

规范化路径,把不规范的路径规范化。

path.join

举例说明

const path = require('path');
console.log(path.join('src', 'task.js'));

const path = require('path');
console.log(path.join(''));

转化后的结果

src/task.js
.

做用总结

path.join([...paths])
  1. 传入的参数是字符串的路径片断,能够是一个,也能够是多个
  2. 返回的是一个拼接好的路径,可是根据平台的不一样,他会对路径进行不一样的规范化,举个例子,Unix系统是/Windows系统是\,那么你在两个系统下看到的返回结果就不同。
  3. 若是返回的路径字符串长度为零,那么他会返回一个.,表明当前的文件夹。
  4. 若是传入的参数中有不是字符串的,那就直接会报错

path.parse

举例说明

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

运行结果

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

做用总结

他返回的是一个对象,那么咱们来把这么几个名词熟悉一下:

  1. root:表明根目录
  2. dir:表明文件所在的文件夹
  3. base:表明整一个文件
  4. name:表明文件名
  5. ext: 表明文件的后缀名

path.basename

举例说明

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

运行结果

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

node核心API
path

做用总结

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

path.dirname

举例说明

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

运行结果

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

做用总结

返回文件的目录完整地址

path.extname

举例说明

const path = require('path');
path.extname('index.html');
path.extname('index.coffee.md');
path.extname('index.');
path.extname('index');
path.extname('.index');

运行结果

.html
.md
.
''
''

做用总结

返回的是后缀名,可是最后两种状况返回'',你们注意一下。

path.resolve

举例说明

const path = require('path');
console.log(path.resolve('/foo/bar', '/bar/faa', '..', 'a/../c'));

输出结果

/bar/c

做用总结

path.resolve([...paths])

path.resolve就至关因而shell下面的cd操做,从左到右运行一遍cd path命令,最终获取的绝对路径/文件名,这个接口所返回的结果了。可是resolve操做和cd操做仍是有区别的,resolve的路径能够没有,并且最后进入的能够是文件。具体cd步骤以下

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

path.relative

举例说明

const path = require('path');

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

console.log(path.relative('/data/demo', '/data/demo'));

console.log(path.relative('/data/demo', ''));

运行结果

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

做用总结

path.relative(from, to)

描述:从from路径,到to路径的相对路径。

边界:

  • 若是from、to指向同个路径,那么,返回空字符串。
  • 若是from、to中任一者为空,那么,返回当前工做路径。

总结

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

今天就分享这么多,若是对分享的内容感兴趣,能够关注公众号「程序员成长指北」,或者加入技术交流群,你们一块儿讨论。

进阶技术路线

加入咱们一块儿学习吧!

相关文章
相关标签/搜索