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);
});

具体概念和其他用途可以查看 文档 或者自己搜索。