原先的iTrip網(wǎng)站是用jsp開發(fā)的，每次改個小小的需求驱显，哪怕是一個小小的樣式，也調(diào)的很惱火瞳抓，還需要麻煩后端小哥幫我調(diào)試埃疫。 吃夠了jsp的苦，在我的觀念中孩哑，能不用jsp就不用了栓霜，這次酒店改版需求，準(zhǔn)備用node分離出來横蜒，這樣后端小哥就闊以給我提供接口就妥妥噠了胳蛮。
目錄結(jié)構(gòu)###
目錄結(jié)構(gòu)
- 項目生成，使用express-generator
1. 全局安裝npm install express-generator -g
2. express [你的項目名稱]
3. npm start 就闊以啟動node服務(wù) - 改造
1. 用ejs替換默認(rèn)使用的jade模板丛晌，npm i ejs --save
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
2. 修改靜態(tài)資源為static下的dist
app.use(express.static(path.join(__dirname, 'static/dist')));
3. 將路由踢出來放在routes中仅炊，并在app.js中引用
require('./routes')(app);
route下index.js內(nèi)容
module.exports = function(app){
app.use('/hotel', require('./hotel'));
app.use('/', require('./home'));
}
4.mod/config
module.exports = {
hostname: "",
apiServer,//內(nèi)網(wǎng)
activityServer: ,
path:,//頁面跳轉(zhuǎn)地址 || 數(shù)據(jù)訪問接口地址
pic:,//圖片地址
ugly:false,//壓縮代碼 加上hash值
publicPath://打包靜態(tài)資源路徑
}
5.mod/request http.request封裝 用到了promise.all執(zhí)行多個操作，避免多個回調(diào)函數(shù)的嵌套（eventproxy可控制并發(fā)）
Promise.all(fetchPageUrl) .then(function(Pages) {
console.log("sucess")
callback && callback(Pages);
}).catch(function(e){
console.log("error")
error && error(e);
}) - 靜態(tài)資源
靜態(tài)資源在static目錄澎蛛。
dist是經(jīng)過webpack編譯后的輸出目錄
src是是開發(fā)目錄
webpack.config.js webpack的配置文件抚垄，使用webpack編譯靜態(tài)資源使用到的插件
1.編譯ES6語法的babel
2. extract-text-webpack-plugin css單獨打包
new ExtractTextPlugin("assets/css/[name]"+hash+".css")
3. glob 拆分文件路徑
var getEntry = function(url,cut) {
var entry = {};
glob.sync(url).forEach(function (name) {
var key = "",value = "";
var str = name.split(cut)[1];
key = str.substring(1,str.lastIndexOf('.'));
value = __dirname + name.substring(1);
if(key != "" && key.indexOf(".") == -1 ){
entry[key] = value;
}
});
return entry;
}
4.html-webpack-plugin 單獨打包html
使用的技術(shù)棧###
- express
- ejs
- webpack
- es6
遺留問題###
- 在webpack.config.js中輸入設(shè)置publicPath設(shè)置為<%=conf.publicPath%> 這樣自動編譯的js和css路徑前可以帶著<%=conf.publicPath%> 根據(jù)發(fā)布不同環(huán)境就能設(shè)置publicPath，但是CSS中的圖片資源本人意愿想保持相對路徑谋逻，然后也會加上<%=conf.publicPath%>呆馁，然后傻白甜css并不認(rèn)識這個是什么，但是publicPath不能設(shè)置多個毁兆。目前解決辦法是在將config.js中的publicPath配置成線上cdn的域名訪問路徑浙滤， 用ugly來判斷，當(dāng)ugly為true時气堕，將靜態(tài)資源CSS和js打包纺腊，已經(jīng)將publicPath設(shè)置成線上環(huán)境畔咧。當(dāng)ugly為false是，就是準(zhǔn)備來發(fā)預(yù)發(fā)布環(huán)境或者測試環(huán)境的摹菠，不需要打包壓縮靜態(tài)資源也不用考慮緩存盒卸，但是問題又來了，這樣預(yù)發(fā)布測試完成后需要發(fā)布線上次氨，還需要我本地手動的將ugly改成true打包蔽介，總是感覺好不科學(xué)啊。
- node訪問的是java的接口煮寡，兩個都放在一個服務(wù)器上虹蓄，在node中獲取數(shù)據(jù)使用域名的方式，就需要經(jīng)過域名解析找到服務(wù)器幸撕，相當(dāng)于出去繞了一圈發(fā)現(xiàn)就在一個地方薇组，浪費資源，目前的做法是請求數(shù)據(jù)的時候直接使用內(nèi)網(wǎng)IP坐儿，在請求的header中將HOST改成需要的域名律胀，但是這樣的局限性是沒有做負(fù)載均衡。知識不夠用啦(≧▽≦)/
后期會繼續(xù)改進(jìn)問題
該文章僅僅是記錄自己開發(fā)的一個過程貌矿，以下是參照學(xué)習(xí)的網(wǎng)址炭菌，謝謝這些同學(xué)的熱心分享，給了我很大的啟發(fā)
[feeiluuo的博客+express+webpack+react搭建項目]
