React+webpack+express的小demo

2017-02-18 本文已影响580人小m_up

要写一个React+webpack+express的小demo那么先得写React然后再用webpack进行打包，最后再加服务器express，而我上篇文章用webpack打包react+ES6刚好解决了前面的问题，这篇文章是接着上篇写的，只是用来加服务器express。当然了，想先了解一下express的，可以看一下我的一个express的小demo。

那么我们先来看一下上次webpack+React的文件结构：

那么接下来就开始加express了：

安装express
安装 Express 并将其保存到依赖列表中：

$ cnpm install express --save

安装express的依赖
安装express的依赖，并将其使用--save添加到package.json文件中

$ cnpm install body-parser cookie-parser multer --save

创建文件
先创建一个server文件，然后再打开文件，将代码写进去即可。

$ touch server.js
$ vim server.js

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

这里说一下app.use(express.static(__dirname + '/public'));这个的主要作用，刚开始因为自己没有很清楚的理解这个，所以就遇到了一些问题。
这句代码在教程中是这样说的：设置静态文件目录。
那么这是什么意思呢？express会根据静态文件目录去查找静态文件，所以静态目录就不需要作为URL的一部分了，简而言之，你要访问public文件夹下的文件，那么你的URL就不需要有public，它默认会去public下找你所需要的文件，比如你想要访问public下的main.js文件，那么你的URL就是http://localhost:3000/main.js，而不需要再加public，这样说应该就比较明了了。

修改index.html
之前index.html中的代码是这样的

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>react-webpack-express-demo</title>
</head>
<body>
    <div id = "app"></div>
    <script src="./public/out/bundle.js"></script>
</body>
</html>

那么为了让它运行不出错，把<script src="./public/out/bundle.js"></script>这句改为：

 <script src="./out/bundle.js"></script>

现在该更清楚的知道app.use(express.static(__dirname + '/public'));的意义了吧，要访问public下的out/bundle.js那么URL就不需要public。
那么我们的这个demo就完美结束啦。

运行方式

$ npm run build
$ node server.js

此时打开http://localhost:3000/就可以看见Hello World!了

源码地址：https://github.com/yangzhanmei/react-webpack-express-demo

React+webpack+express的小demo

猜你喜欢

热点阅读