原来你还可以这样改bug

遇到bug之前

前两天在学习express，因为之前用过express，所以就简单的看了一下express的使用，然后就用react+webpack+express搭建一个框架，刚开始的目录结构是这样的：

out目录下的bundle.js是用webpack打包之后的入口文件。
在加express之前react+webpack是没有任何问题的，那么我加了express，就只是加了一个server.js，里面的内容是这样的：

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

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
    res.sendFile(__dirname +'/index.html');
});

app.listen(3000, () => {
    console.log('Server started.');
});

初遇bug

看起来没有任何问题，然而运行结果是这样的：

刚遇到这个问题的时候我有点懵，然后就开始了万年不变的方式：

• 立马Google，希望能找到问题的解决办法，然而未果。
• 和同窗讨论，同未果。
• 向总理请教

其实在向总理请教之前，自己试着解决了很久，但是未果，所以

在大神的指点下才发现自己解决问题时的问题：

• 没有了解错误到底是什么，盲目的只求答案。
• 没有深刻的理解自己的代码。

重审bug

• 在Console这里单单凭这一句话是无法判断错误的，所以这时就可以打开Network来看一下到底是什么问题。

从这里可以看出来bundle.js是404，那么就可以发现错误是404，那么接下来想一下为什么会出现404呢？

• 判断出现404的原因
  首先第一个想到的肯定是端口的问题，所以就将3000端口替换为8080，再运行程序，发现出现了一样的错误，那么说明并不是端口的问题。
  接着就会想到会不会是路径的问题，导致无法访问bundle.js这个文件。所以就需要重新审视一下代码了。
• 重审代码
  说起路径那么就只有这两条代码是访问路径的：

app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
    res.sendFile(__dirname +'/index.html');
});

那么先来看第一句，app.use(express.static(__dirname + '/public'));，这句代码在教程中是这样说的：设置静态文件目录。那么这是什么意思呢？express会根据静态文件目录去查找静态文件，所以静态目录就不需要作为URL的一部分了，简而言之，你要访问public文件夹下的文件，那么你的URL就不需要有public，它默认会去public下找你所需要的文件，比如你想要访问public下的main.js文件，那么你的URL就是http://localhost:3000/main.js，而不需要再加public。那么由这个可以推出，如果我想要访问http://localhost:3000/out/bundle.js，那么就可以将out/bundle.js置于public下，所以就将文件目录改为：

就完美的解决了刚才的那个bug！

学到

• 遇到问题一定要先找到原因，而不是盲目的去搜寻答案。
• 懂得看Network里面的内容，而不是只看表面的错误。
• 遇到问题整理思路，一步一步去解决。
• 不管是学啥一定要懂得每一条代码的意思，而不是只想着会用就好，不然遇到问题之后完全不知道到底是何原因造成的，其实遇到这个问题的时候有和朋友一起讨论，并且也讨论到了一个问题，她说她express基础学的不是很好，但是以前老师搭过的框架可以用，能用就可以了吧，我当时其实也差点放弃对这个问题的解决，也准备拿着以前的框架在里面添东西来着，在自己仅有的耐心下通过总理的指点还是完成了，所以其实并没有什么是做不成的，只有自己想不想做而已。