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

时间: 2019-08-20阅读: 416标签: 文件

前言

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


node中的路径分类

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

通过代码对每个分类进行说明:

文件目录结构如下:

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

path.js中的代码

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

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

/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

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

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

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

exports.A = 1;

之前直接通过readFile读取文件路径报错,

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中任一者为空,那么,返回当前工作路径。


总结

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

关注「程序员成长指北」,持续为你推送优质精选好文
作者:koala_coding
链接:http://www.imooc.com/article/details/id/291333

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4835

JavaScript 如何读取本地文件

出于安全和隐私的原因,web应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件,可以通过使用input file和FileReader来实现。在这篇文章中,我们将通过一些例子来看看它是如何工作的。

Linux下你还知道这些特殊文件?

/dev/null 可无限接收数据,你可以认为是一个黑洞,因此如果我们需要丢弃某些终端输出,可以重定向到这里:所以如果你有不需要的数据可以尽情的往这里写。

在nodejs中怎么返回文件状态?

在nodejs中可以使用fs模块的stat()方法来返回文件状态,如使用stats.size获取文件大小,使用stats.isFile()判断是否为文件等。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

使用HttpClient发送文件流到服务器端

适用场景: 网络绝对路径的URL文件或图片,不存储到本地,转换成stream,直接使用HTTPClient传送到SpringBoot的服务端,将文件存储下来,并返回一个文件地址。目前分层架构的系统越来越多这种需求,所以记录下来以备不时之需。

nodejs对项目下所有空文件夹创建gitkeep

项目/框架初始化时可能需要保留一些空文件,这时候就需要批量新增gitkeep

vue读取本地的excel文件并显示在网页上

我想实现读取一个本地的xlsx文件(task_list.xlsx)然后显示在网页上, 一开始选择的方法是建个express server, 通过发送axios请求来实现, 但是觉得只是读取一个本地文件还要搞个server太复杂了

css是什么格式的文件?

css指的是层叠样式表(Cascading Style Sheets),它是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言,是可以做到网页和内容进行分离的一种样式语言。

Webpack require.context() 前端工程化之动态导入文件

webpack作为前端构建的打包工具, 把各种资源,例如JS(含JSX)、coffee、css(含less/sass)、图片等都作为模块来处理和使用,它已经做了非常好了,它还有非常多的功能等待我们去发掘,研究。

基于Node的Axure文件在线预览

公司现在的产品Axure文档在生成好Html文件之后,都是通过git来进行管理的,每次文件更新,大家都需要从git上进行拉取,然后在本地查看,更新会出现不及时的问题,大家有时候忘记git拉取导致出现实现效果与最终产品稿不一致

关于文件上传下载那些事

最传统的文件上传方法是使用form表单上传文件的,只需要把enctype设置为 multipart/form-data。这种方式上传文件不需要 js ,而且没有兼容问题,所有浏览器都支持,就是体验很差,导致页面刷新,页面其他数据丢失

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广