成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

教你webpack、react和node.js環(huán)境配置（下篇）

Sourcelink / 1889人閱讀

摘要：上篇我介紹了前端下和等環(huán)境的配置，這篇將繼續(xù)重點(diǎn)介紹后臺(tái)的配置。我把所有代碼都放到了我的上環(huán)境配置后臺(tái)這邊的配置就簡(jiǎn)單了很多，我這里拿的框架來(lái)配置。

上篇我介紹了前端下webpack和react、redux等環(huán)境的配置，這篇將繼續(xù)重點(diǎn)介紹后臺(tái)node.js的配置。

我把所有代碼都放到了我的github上：webpack-react-express環(huán)境配置

server

后臺(tái)這邊的配置就簡(jiǎn)單了很多，我這里拿node.js的express框架來(lái)配置。

express

Express 是一個(gè)基于 Node.js 平臺(tái)的極簡(jiǎn)、靈活的 web 應(yīng)用開發(fā)框架，它提供一系列強(qiáng)大的特性，幫助你創(chuàng)建各種 Web 和移動(dòng)設(shè)備應(yīng)用。

安裝express 
npm install express --save

在這里我推薦一個(gè)express應(yīng)用生成器，會(huì)幫你自動(dòng)生成express項(xiàng)目的目錄。

npm install express-generator -g

所以在這里我們將此前創(chuàng)建好的server文件夾刪除，然后用express自動(dòng)生成。

rm -rf server && express server

我們先刪除自動(dòng)生成的不需要的目錄。

rm -rf views && public

這時(shí)候會(huì)發(fā)現(xiàn)server目錄下面也有一個(gè)package.json文件，這個(gè)文件保存著express需要的依賴，我們可以把里面的內(nèi)容合并到外面的package.json里面然后再刪除，然后不要忘了用npm install來(lái)重新安裝一遍里面的模塊。

我們打開app.js文件，發(fā)現(xiàn)里面已經(jīng)已經(jīng)寫好了代碼，但是這些代碼并不是完全符合我們需求，比如我們不想使用jade或ejs模板引擎，我們想用前后端分離的開發(fā)方式，只想render一個(gè)html，我們需要修改一下代碼。

因?yàn)橐玫絜js的一個(gè)功能，所以先安裝ejs。

// 自動(dòng)生成的代碼
app.set("views", path.join(__dirname, "views")); // 設(shè)置模板的路徑
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"); // 將模板設(shè)置為html
app.engine("html", ejs.renderFile); 
app.use(express.static(path.join(__dirname, "../client/dist")));

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

// 刪掉這些
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");
});

這時(shí)候，我們只需要在命令行里面輸入node app.js就可以跑了。

但是這樣還沒完，我們每次運(yùn)行node是不是都要到server目錄下面？我用的不是node新版本，但是我想用es6的語(yǔ)法怎么辦？

在express里面使用es2015

還記得上篇我們多帶帶提取出來(lái)一個(gè).babelrc文件嗎？這個(gè)里面已經(jīng)設(shè)置了轉(zhuǎn)碼規(guī)則，babel-cli自帶了一個(gè)babel-node命令，它讓在node環(huán)境里面運(yùn)行es6的語(yǔ)法成為可能。

開始前我先安利一下nodemon，它可以讓node自動(dòng)重啟，而不需要我們每次手動(dòng)重啟node。

npm install nodemon -g

它的用法和node一樣，我們可以直接nodemon app.js來(lái)開啟node服務(wù)，當(dāng)你修改node代碼時(shí)，它會(huì)自動(dòng)重啟node。

我們需要修改一下package.json文件，在scripts屬性里面添加一個(gè)start屬性，并添加以下代碼：

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

把代碼修改為es6的語(yǔ)法：

這個(gè)時(shí)候我們不僅可以在express里面使用最新的es語(yǔ)法，還可以直接用npm start命令來(lái)開啟node服務(wù)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99532.html

相關(guān)文章

  • 教你webpack、react和node.js環(huán)境配置（下篇）

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

    TNFE 評(píng)論0 收藏0

  • 教你webpack、react和node.js環(huán)境配置（上篇）

    摘要：這里是里面的內(nèi)容安裝如果速度太慢，建議使用淘寶的，和的區(qū)別建議去了解一下。安裝以及相關(guān)插件使用加載器繼續(xù)修改里面的內(nèi)容，給對(duì)象加一個(gè)屬性。 很多人剛學(xué)習(xí)react的時(shí)候，往往因?yàn)榉爆嵉呐渲枚^疼，這里我將手把手教大家怎么用webpack配置react和redux的環(huán)境，這篇教程包括前端react和后臺(tái)node整個(gè)網(wǎng)站的環(huán)境配置，對(duì)node沒興趣的可以只看這篇。這里是下篇鏈接：手把手教你...

    SoapEye 評(píng)論0 收藏0

  • 教你webpack、react和node.js環(huán)境配置（上篇）

    摘要：這里是里面的內(nèi)容安裝如果速度太慢，建議使用淘寶的，和的區(qū)別建議去了解一下。安裝以及相關(guān)插件使用加載器繼續(xù)修改里面的內(nèi)容，給對(duì)象加一個(gè)屬性。 很多人剛學(xué)習(xí)react的時(shí)候，往往因?yàn)榉爆嵉呐渲枚^疼，這里我將手把手教大家怎么用webpack配置react和redux的環(huán)境，這篇教程包括前端react和后臺(tái)node整個(gè)網(wǎng)站的環(huán)境配置，對(duì)node沒興趣的可以只看這篇。這里是下篇鏈接：手把手教你...

    alexnevsky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<