Node---文件路徑與app.use()

在弄服務端渲染的時候使用到文件路徑和中間件的use()，就寫一下本身的理解作筆記，只記錄已使用過的，概念和分析並不齊全。

文件路徑

在node中__dirname、__filename、process.cwd()都是絕對路徑，他們都分別是什麼？例子：

1.文件夾結構以下，執行app.js:

2.執行位置:

3.返回結果:

__dirname:      /Users/jenson/work/react/react-ssr/ssr-express/server
__filename:     /Users/jenson/work/react/react-ssr/ssr-express/server/app.js
process.cwd():  /Users/jenson/work/react/react-ssr/ssr-express
複製代碼

---

當咱們把文件夾的層次加深再打印出來，能夠看到：

1.文件夾結構以下，執行app.js:

2.執行位置:

3.返回結果:

__dirname:      /Users/jenson/work/react/react-ssr/ssr-express/server/demo
__filename:     /Users/jenson/work/react/react-ssr/ssr-express/server/demo/app.js
process.cwd():  /Users/jenson/work/react/react-ssr/ssr-express
複製代碼

__dirname和__filename與執行的文件的位置有關。

如今改變一下執行文件的路徑：

把執行路徑深刻到server文件夾和demo文件夾時返回是：

// server
__dirname:      /Users/jenson/work/react/react-ssr/ssr-express/server/demo
__filename:     /Users/jenson/work/react/react-ssr/ssr-express/server/demo/app.js
process.cwd():  /Users/jenson/work/react/react-ssr/ssr-express/server

// demo
__dirname:      /Users/jenson/work/react/react-ssr/ssr-express/server/demo
__filename:     /Users/jenson/work/react/react-ssr/ssr-express/server/demo/app.js
process.cwd():  /Users/jenson/work/react/react-ssr/ssr-express/server/demo
複製代碼

process.cwd()與用戶node操做的文件夾執行位置有關。

結論：

// app.js 文件路徑
console.log('__dirname: ', __dirname);         // 得到當前執行文件所在目錄的完整 - 目錄名
console.log('__filename: ', __filename);       // 得到當前執行文件的帶有完整絕對路徑的 - 文件名
console.log('process.cwd(): ', process.cwd()); // 得到當前執行node命令時候的文件夾 - 目錄名 
複製代碼

app.use

作服務端渲染時使用create-react-app並直接 build 生成以下目錄結構：

npx create-react-app ssr-express --typescript

cd ssr-express

npm run build

// app.js
const express = require('express');
const path = require('path');
const app = express();

const config = {
  port: 3030
}

// 把build目錄下的文件錄入express
app.use(express.static(
  path.join(__dirname, '..', '/build')
));

app.listen(config.port ,function(){
  console.log("open Browser http://localhost:" + config.port);
});
複製代碼

app.use()在koa和express裏面的使用方法差很少，都是爲中間件存放方法和文件。

上面代碼執行後顯示以下：

這裏就是把build文件夾這個錄入到express裏，因此直接打開 http://127.0.0.1:3030 就是build裏面的內容。

因此當咱們作瀏覽器中打開 http://127.0.0.1:3030/logo512.png ：

咱們本身建立一個 demo 實例:

const express = require('express');
const path = require('path');
const app = express();

const config = {
  port: 3030
}

// 把build目錄下的文件錄入express
app.use(
  express.static(
    path.join(__dirname, '..', '/build')
  )
);
// 建立demo實例
app.use('/demo', (req, res, next) => {
  res.send('hello~');
});

app.listen(config.port ,function(){
  console.log("open Browser http://localhost:" + config.port);
});

複製代碼

具體概念和其餘用途能夠查看 文檔 或者本身搜索。