web前端入門到實戰：前端工程師也要掌握的幾種檔案路徑知識

前言

之前在做webpack配置時候多次用到路徑相關内容，最近在寫項目的時候，有一個檔案需要上傳到阿裡雲oss的功能，同時本地伺服器也需要保留一個檔案備份。多次用到了檔案路徑相關内容以及Node核心API的path子產品，是以系統的學習了一下，整理了這篇文章。

node中的路徑分類

node中的路徑大緻分5類，dirname,filename,process.cwd(),./,…/,其中dirname,filename,process.cwd()絕對路徑

通過代碼對每個分類進行說明：

檔案目錄結構如下：

代碼pra/
  - node核心API/
      - fs.js
      - path.js
web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視訊）
           

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() 時才使用相對路徑(./, …/) 的寫法，其他地方一律使用絕對路徑，如下：

web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視訊）
// 目前目錄下
 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

舉例說明

web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視訊）
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
           

對web前端這門技術感興趣的小夥伴可以加入到我們的學習圈來，工作第六個年頭了，與大家分享一些學習方法，實戰開發需要注意的細節。767-273-102 秋裙。從零基礎開始怎麼樣學好前端。看看前輩們是如何在程式設計的世界裡傲然前行！不停更新最新的教程和學習方法（web前端系統學習路線，詳細的前端項目實戰教學視訊），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入。我們會一起結伴同行前端前端前端

作用總結

path.relative(from, to)

描述：從from路徑，到to路徑的相對路徑。

邊界：

• 如果from、to指向同個路徑，那麼，傳回空字元串。
• 如果from、to中任一者為空，那麼，傳回目前工作路徑。

總結

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