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

复制代码

具体概念和其余用途能够查看 文档 或者本身搜索。