原先的iTrip网站是用jsp开发的，每次改个小小的需求，哪怕是一个小小的样式，也调的很恼火，还需要麻烦后端小哥帮我调试。 吃够了jsp的苦，在我的观念中，能不用jsp就不用了，这次酒店改版需求，准备用node分离出来，这样后端小哥就阔以给我提供接口就妥妥哒了。
目录结构###
目录结构
- 项目生成，使用express-generator
1. 全局安装npm install express-generator -g
2. express [你的项目名称]
3. npm start 就阔以启动node服务 - 改造
1. 用ejs替换默认使用的jade模板，npm i ejs --save
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
2. 修改静态资源为static下的dist
app.use(express.static(path.join(__dirname, 'static/dist')));
3. 将路由踢出来放在routes中，并在app.js中引用
require('./routes')(app);
route下index.js内容
module.exports = function(app){
app.use('/hotel', require('./hotel'));
app.use('/', require('./home'));
}
4.mod/config
module.exports = {
hostname: "",
apiServer,//内网
activityServer: ,
path:,//页面跳转地址 || 数据访问接口地址
pic:,//图片地址
ugly:false,//压缩代码 加上hash值
publicPath://打包静态资源路径
}
5.mod/request http.request封装 用到了promise.all执行多个操作，避免多个回调函数的嵌套（eventproxy可控制并发）
Promise.all(fetchPageUrl) .then(function(Pages) {
console.log("sucess")
callback && callback(Pages);
}).catch(function(e){
console.log("error")
error && error(e);
}) - 静态资源
静态资源在static目录。
dist是经过webpack编译后的输出目录
src是是开发目录
webpack.config.js webpack的配置文件，使用webpack编译静态资源使用到的插件
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
使用的技术栈###
- express
- ejs
- webpack
- es6
遗留问题###
- 在webpack.config.js中输入设置publicPath设置为<%=conf.publicPath%> 这样自动编译的js和css路径前可以带着<%=conf.publicPath%> 根据发布不同环境就能设置publicPath，但是CSS中的图片资源本人意愿想保持相对路径，然后也会加上<%=conf.publicPath%>，然后傻白甜css并不认识这个是什么，但是publicPath不能设置多个。目前解决办法是在将config.js中的publicPath配置成线上cdn的域名访问路径， 用ugly来判断，当ugly为true时，将静态资源CSS和js打包，已经将publicPath设置成线上环境。当ugly为false是，就是准备来发预发布环境或者测试环境的，不需要打包压缩静态资源也不用考虑缓存，但是问题又来了，这样预发布测试完成后需要发布线上，还需要我本地手动的将ugly改成true打包，总是感觉好不科学啊。
- node访问的是java的接口，两个都放在一个服务器上，在node中获取数据使用域名的方式，就需要经过域名解析找到服务器，相当于出去绕了一圈发现就在一个地方，浪费资源，目前的做法是请求数据的时候直接使用内网IP，在请求的header中将HOST改成需要的域名，但是这样的局限性是没有做负载均衡。知识不够用啦(≧▽≦)/
后期会继续改进问题
该文章仅仅是记录自己开发的一个过程，以下是参照学习的网址，谢谢这些同学的热心分享，给了我很大的启发
[feeiluuo的博客+express+webpack+react搭建项目]
网友评论