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

Sourcelink 發布于2019-08-23 13:46 / 1883人閱讀

摘要：上篇我介紹了前端下和等環境的配置，這篇將繼續重點介紹后臺的配置。我把所有代碼都放到了我的上環境配置后臺這邊的配置就簡單了很多，我這里拿的框架來配置。

上篇我介紹了前端下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")));

然后我們刪除掉自動生成的路由信息，改為我們的：

// 刪掉這些
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服務。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99532.html

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

摘要：上篇我介紹了前端下和等環境的配置，這篇將繼續重點介紹后臺的配置。我把所有代碼都放到了我的上環境配置后臺這邊的配置就簡單了很多，我這里拿的框架來配置。上篇我介紹了前端下webpack和react、redux等環境的配置，這篇將繼續重點介紹后臺node.js的配置。我把所有代碼都放到了我的github上：webpack-react-express環境配置 server 后臺這邊的配置就...

TNFE 2019-07-25 14:33 評論0 收藏0
教你webpack、react和node.js環境配置（上篇）

摘要：這里是里面的內容安裝如果速度太慢，建議使用淘寶的，和的區別建議去了解一下。安裝以及相關插件使用加載器繼續修改里面的內容，給對象加一個屬性。很多人剛學習react的時候，往往因為繁瑣的配置而頭疼，這里我將手把手教大家怎么用webpack配置react和redux的環境，這篇教程包括前端react和后臺node整個網站的環境配置，對node沒興趣的可以只看這篇。這里是下篇鏈接：手把手教你...

SoapEye 2019-08-23 13:43 評論0 收藏0
教你webpack、react和node.js環境配置（上篇）

摘要：這里是里面的內容安裝如果速度太慢，建議使用淘寶的，和的區別建議去了解一下。安裝以及相關插件使用加載器繼續修改里面的內容，給對象加一個屬性。很多人剛學習react的時候，往往因為繁瑣的配置而頭疼，這里我將手把手教大家怎么用webpack配置react和redux的環境，這篇教程包括前端react和后臺node整個網站的環境配置，對node沒興趣的可以只看這篇。這里是下篇鏈接：手把手教你...

alexnevsky 2019-07-25 14:33 評論0 收藏0