之前在做webpack配置时候多次用到路径相关内容,最近在写项目的时候,有一个文件需要上传到阿里云oss的功能,同时本地服务器也需要保留一个文件备份。多次用到了文件路径相关内容以及Node核心API的path模块,所以系统的学习了一下,整理了这篇文章。
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
对比输出结果,暂时得到的结论是
为什么说上面是暂时得到的结论,因为是有错误的,再看一段代码:
我们在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() 效果相同,是相对于启动脚本所在目录的路径。
只有在 require() 时才使用相对路径(./, ../) 的写法,其他地方一律使用绝对路径,如下:
// 当前目录下
path.dirname(__filename) + '/path.js';
// 相邻目录下
path.resolve(__dirname, '../regx/regx.js');
前面讲解了路径的相关比较,接下来单独聊聊path这个模块,这个模块在很多地方比较常用,所以,对于我们来说,掌握他,对我们以后的发展更有利,不用每次看webpack的配置文件还要去查询一下这个api是干什么用的,很影响我们的效率
这是api官网地址:https://nodejs.org/api/path.html
个人认为官网中的api没有必要都掌握,下面会对一些常用的api进行讲解,我经常用到的,或者作为一个前端开发工程师在webpack等工程配置的时候经常用到的。
举例说明
const path = require('path');
console.log(path.normalize('/koala/Desktop//程序员成长指北//代码pra/..'));
规范后的结果
/koala/Desktop/程序员成长指北/代码pra
作用总结
规范化路径,把不规范的路径规范化。
举例说明
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])
举例说明
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'
}
作用总结
他返回的是一个对象,那么我们来把这么几个名词熟悉一下:
举例说明
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(可选参数),当输入第二个参数的时候,打印结果不出现后缀名
举例说明
const path = require('path');
console.log(path.dirname('/koala/Desktop/程序员成长指北/代码pra/node核心API'));
运行结果
/koala/Desktop/程序员成长指北/代码pra
作用总结
返回文件的目录完整地址
举例说明
const path = require('path');
path.extname('index.html');
path.extname('index.coffee.md');
path.extname('index.');
path.extname('index');
path.extname('.index');
运行结果
.html
.md
.
''
''
作用总结
返回的是后缀名,但是最后两种情况返回'',大家注意一下。
举例说明
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
举例说明
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路径的相对路径。
边界:
本篇文章关于路径的知识就说到这里,基础很重要的,既能节约开发时间,又能减少报错。
关注「程序员成长指北」,持续为你推送优质精选好文
作者:koala_coding
链接:http://www.imooc.com/article/details/id/291333
最近在做关于文件下载的需求:前端调用接口,然后对返回数据进行过滤、格式化,然后按表格内容拼接生成csv文件,让用户下载。数据中存在 ‘,‘ 逗号问题处理:将整个数据用双引号(英文格式)包裹起来,这样会显示成一个单元格。
/dev/null 可无限接收数据,你可以认为是一个黑洞,因此如果我们需要丢弃某些终端输出,可以重定向到这里:所以如果你有不需要的数据可以尽情的往这里写。
直接进入主题,大概步骤如下:在 assets 创建需要访问 html 文件,这里创建一个files文件夹,专门来放这些静态 html 文件.在 pubspec.yaml 中配置访问位置
在写Chrome extension时候,偶尔需要将网页的内容保存到文件。要实现此功能,正常的流程是创建Blob对象存放内容,创建url,创建一个 a 标签,然后将连接与Blob对象关联并放到 a标签的href或者download(H5)属性中
目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等.获取这些信息再结合微信的上传接口wx.uploadFile,即可实现文件上传.
用input file上传文件,掉用onchange方法时,多次上传同一个文件时功能失效,不会发送ajax请求,input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发
一般web前端处理导出文件有两种方法:其实现原理就是先把服务端返回的数据流通过URL.createObjectURL()方法转成一个URL,这个URL是存放在内存中的,URL的生命周期是和创建的它的document绑定
有时当你需要移动一个文件时,mv 命令似乎不是最佳选项,那么你会如何做呢?不起眼的 mv 命令是在你见过的每个 POSIX 系统中都能找到的有用工具之一。它的作用是明确定义的,并且做得很好
公司现在的产品Axure文档在生成好Html文件之后,都是通过git来进行管理的,每次文件更新,大家都需要从git上进行拉取,然后在本地查看,更新会出现不及时的问题,大家有时候忘记git拉取导致出现实现效果与最终产品稿不一致
webpack作为前端构建的打包工具, 把各种资源,例如JS(含JSX)、coffee、css(含less/sass)、图片等都作为模块来处理和使用,它已经做了非常好了,它还有非常多的功能等待我们去发掘,研究。