教你webpack、react和node.js环境配置（下篇）

上篇我介绍了前端下webpack和react、redux等环境的配置，这篇将继续重点介绍后台node.js的配置。

我把全部代码都放到了个人github上：webpack-react-express环境配置

server

后台这边的配置就简单了不少，我这里拿node.js的express框架来配置。

express

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你建立各类 Web 和移动设备应用。

安装express

npm install express --save
复制代码

在这里我推荐一个express应用生成器，会帮你自动生成express项目的目录。

npm install express-generator -g
复制代码

因此在这里咱们将此前建立好的server文件夹删除，而后用express自动生成。

rm -rf server && express server
复制代码

咱们先删除自动生成的不须要的目录。

rm -rf views && public
复制代码

这时候会发现server目录下面也有一个package.json文件，这个文件保存着express须要的依赖，咱们能够把里面的内容合并到外面的package.json里面而后再删除，而后不要忘了用npm install来从新安装一遍里面的模块。

咱们打开app.js文件，发现里面已经已经写好了代码，可是这些代码并非彻底符合咱们需求，好比咱们不想使用jade或ejs模板引擎，咱们想用先后端分离的开发方式，只想render一个html，咱们须要修改一下代码。

由于要用到ejs的一个功能，因此先安装ejs。

// 自动生成的代码
app.set('views', path.join(__dirname, 'views')); // 设置模板的路径
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, 'public')));

// 咱们修改后的
app.set('views', path.join(__dirname, '../client/dist'));
app.set('view engine', 'html'); // 将模板设置为html
app.engine('html', ejs.renderFile); 
app.use(express.static(path.join(__dirname, '../client/dist')));
欢迎加入全栈开发交流圈一块儿学习交流：582735936
面向1-3年前端人员
帮助突破技术瓶颈，提高思惟能力
复制代码

而后咱们删除掉自动生成的路由信息，改成咱们的：

// 删掉这些
var index = require('./routes/index');
var users = require('./routes/users');
app.use('/', index);
app.use('/users', users);

// 而后添加
var port = 4000；
app.all("*", function(req, res) {
    res.render("index");
})
app.listen(port, function() {
    console.log("server is running on port 4000");
});
复制代码

这时候，咱们只须要在命令行里面输入node app.js就能够跑了。

可是这样还没完，咱们每次运行node是否是都要到server目录下面？我用的不是node新版本，可是我想用es6的语法怎么办？

在express里面使用es2015

还记得上篇咱们单独提取出来一个.babelrc文件吗？这个里面已经设置了转码规则，babel-cli自带了一个babel-node命令，它让在node环境里面运行es6的语法成为可能。

开始前我先安利一下nodemon，它可让node自动重启，而不须要咱们每次手动重启node。

npm install nodemon -g
复制代码

它的用法和node同样，咱们能够直接nodemon app.js来开启node服务，当你修改node代码时，它会自动重启node。

咱们须要修改一下package.json文件，在scripts属性里面添加一个start属性，并添加如下代码：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon ./server/app.js --exec babel-node"
  },
复制代码

把代码修改成es6的语法：

这个时候咱们不只能够在express里面使用最新的es语法，还能够直接用npm start命令来开启node服务。

image