前端工程師必須掌握的幾種文件路徑知識

前言

之前在做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])

傳入的參數是字符串的路徑片段，可以是一個，也可以是多個
返回的是一個拼接好的路徑，但是根據平臺的不同，他會對路徑進行不同的規範化，舉個例子，Unix系統是/，Windows系統是\，那麼你在兩個系統下看到的返回結果就不一樣。
如果返回的路徑字符串長度爲零，那麼他會返回一個.，代表當前的文件夾。
如果傳入的參數中有不是字符串的，那就直接會報錯

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' 
}

作用總結

他返回的是一個對象，那麼我們來把這麼幾個名詞熟悉一下：

root：代表根目錄
dir：代表文件所在的文件夾
base：代表整一個文件
name：代表文件名
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中任一者爲空，那麼，返回當前工作路徑。

總結

本篇文章關於路徑的知識就說到這裏，基礎很重要的，既能節約開發時間，又能減少報錯。

❤️ 看完三件事

如果你覺得這篇內容對你挺有啓發，我想邀請你幫我三個小忙：

點個「在看」，讓更多的人也能看到這篇內容（喜歡不點在看，都是耍流氓 -_-）
關注我的博客 https://github.com/SHERlocked93/blog，讓我們成爲長期關係
關注公衆號「前端下午茶」，持續爲你推送精選好文，也可以加我爲好友，隨時聊騷。

在看點這裏