上一篇文章谈到了重构的原因和基本思路，在这片文章里我们将具体地阐述我们是如何做的。
技术选型
基本采用了原有的技术实现，以js、less和html为基础，这没什么好说的。在服务端模板的选择中，我们选择了smarty模板，在糯米的wap端，我们采用了crox这个模板，两者我们都解决了同一份模板在前后端通用的小难题，大大地提高了开发效率。
目录结构
我们的目录结构参考了我们的团队规范，抛弃了原有的FIS的结构形式，变为以下形式：
.
├── bower.json
├── build
├── build.sh
├── dep // 第三方依赖
├── fis-conf.js
├── gulpfile.js
├── mock
├── node_modules
├── package.json
├── preview
├── src
├── static // 静态资源
├── template // 后端模板
├── test
├── tool
└── webpack.config.js
模块管理
我们的模块构建方式采用commonjs，因此我们可以利用npm上大量的优质模块，通过webpack可以跟我们前端开发常用的AMD和CMD无缝的结合。
第三方依赖
开发过程中，必不可少将会用到社区里现有的优质模块，通过bower进行所有模块的管理，我们将统一放在dep文件夹下进行管理，并通过webpack的配置，可以在本地模块的应用。 如在webpack的reslove配置项中配置相应的alias，就可以在实际开发中调用它，如requirejs的path配置。
// webpack.config.js
alias = {
'moye': depPath + '/moye/src/ui',
'avalon': depPath + '/avalon/dist/avalon',
'etpl': depPath + '/etpl/src/main'
};
// main.js
var moye = require('moye');
var avalon = require('avalon');
管理其他资源
开发过程中，一个组件通常包含多种资源（图片、less、swf、tpl等），如何才能方便的调用和管理呢？
对于以上问题，通过webpack的loader机制，我们将所有的资源都统一在JS中进行管理，而且我们可以通过编写自己的loader，来实现自己的所需的资源加载机制。举个栗子，
require('./main.less'); // 组件所需的less
var etpl = require('etpl');// 前端模板引擎
var search = require('./search/main'); // js
var suggestion = require('raw!./suggestion.html'); // html文本，前端模板引擎用
var smartyTpl = require('smarty4js!./smarty.tpl'); // smarty模板，转成js模板函数
var $ = require('jquery');
var exports = {
init: function (options) {
// do something
},
render: function () {
// data是数据对象
etpl.compile(suggestion).render(data);
smartyTpl.render(data);
}
};
module.exports = exports;
通过上面的代码实例，我们发现所有的资源都在一个main.js获得清晰的展现，而不是分散在整个项目中，因此便于更好地维护一个组件，组件在一定程度上变得内聚。通过webpack的loader，我们将一些需要通过手动或者命令行方式的工作，直接通过代码就能实现。
前端测试
测试采用了karma + jasmine 结合完成，因为我们的运行代码是通过webpack打包器生成的，所以测试过程中需要karma与webpack相结合。
上线部署
在上线部署中，我们保留原有的FIS的部署功能，利用FIS强大的工程化的功能，我们的将资源路径替换、发布到测试机器、压缩打包、strong text、资源统计追踪等繁琐的工作全部以工程化的形式完成，大大的节约了人力成本，有兴趣可以参考FIS官网的示例。
构建工具
将一系列工作我们通过gulp全部串联起来，整个过程所需要的命令为数不多。我们所用的gulp文件如下：
var gulp = require('gulp');
var config = require('./webpack.config');
var webpack = require('gulp-webpack-build');
var shelljs = require('shelljs');
var path = require('path');
var fs = require('fs');
var cwd = process.cwd();
var etpl = require('etpl');
var karma = require('karma').server;
// clean all files
gulp.task('clean', function () {
shelljs.rm('-rf', path.join(cwd, 'static','common'));
shelljs.rm('-rf', path.join(cwd, 'static','car'));
});
function printResult(stats) {
stats = stats.toJson();
(stats.errors || []).forEach(function (err) {
console.error('error', err);
});
stats.assets.forEach(function (item) {
var size = (item.size / 1024.0).toFixed(2) + 'kB';
console.log('generated', item.name, size);
});
}
var src = './src',
webpackOptions = {
debug: false,
// devtool: '#source-map',
watchDelay: 200
},
webpackConfig = {
useMemoryFs: true,
progress: true
};
var CONFIG_FILENAME = './webpack.config.js';
var dest = './static';
gulp.task('webpack', [], function() {
return gulp.src('./webpack.config.js', { base: path.resolve(src) })
.pipe(webpack.init(webpackConfig))
.pipe(webpack.props(webpackOptions))
.pipe(webpack.run())
.pipe(webpack.format({
version: false,
timings: true
}))
.pipe(webpack.failAfter({
errors: true,
warnings: true
}))
.pipe(gulp.dest(dest));
});
gulp.task('build', function () {
gulp.src('./src/**/*.tpl')
.pipe(gulp.dest('template/newpc'));
});
gulp.task('watch', function () {
gulp.watch(['./src/**/*.js', './src/**/*.less']).on('change', function(event) {
if (event.type === 'changed') {
gulp.src(event.path, { base: path.resolve(src) })
.pipe(webpack.closest(CONFIG_FILENAME))
.pipe(webpack.init(config))
.pipe(webpack.props(webpackOptions))
.pipe(webpack.watch(function(err, stats) {
gulp.src(this.path, { base: this.base })
.pipe(webpack.proxy(err, stats))
.pipe(webpack.format({
verbose: true,
version: false
}))
.pipe(gulp.dest(dest));
}));
}
});
});
gulp.task('test', function (done) {
karma.start({
configFile: __dirname + '/test/config.js'
}, done);
});
gulp.task('debug', ['webpack'], function(){
var process = require('child_process');
process.exec('fis release -d local');
});
后续规划
现如今糯米PC的技术框架还是采用以jquery为基础的模块化前端框架，这次通过commonjs的组织方式，也是为了后面代码能够在Node等后端进行处理，更好地达到前后端分层开发，完完全全去除后端模板的依赖。
在思考的过程中，实际是借鉴React，希望后续在浏览器兼容放开的基础和React更加成熟的基础上，糯米部分复杂的业务能采用React Component的方式进行开发，来实现同构开发。
