做爲一個前端工程師也要掌握的幾種文件路徑知識

前言

以前在作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中任一者爲空，那麼，返回當前工做路徑。

總結

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

今天就分享這麼多，若是對分享的內容感興趣，能夠關注公衆號「程序員成長指北」，或者加入技術交流羣，你們一塊兒討論。

進階技術路線

加入咱們一塊兒學習吧！