周一公司讓基本于[百度鷹眼系統(tǒng)](https://github.com/baidu-openmap-trace/web-demo-v3)開(kāi)發(fā)一個(gè)項(xiàng)目，  
之前對(duì)fis3也所了解，那么現(xiàn)在用于開(kāi)發(fā)項(xiàng)目，肯定要在fis3的基礎(chǔ)上定制自己的開(kāi)發(fā)環(huán)境，調(diào)研了解到fis3   
存在下面幾點(diǎn)小問(wèn)題：  
1. fis3的內(nèi)置server無(wú)法關(guān)閉，需要通過(guò)進(jìn)程殺死，這怎么能容忍呢
2. fis3的mock無(wú)法滿足項(xiàng)目需求
3. fis3的proxy是有問(wèn)題的，官方也是這么說(shuō)，所以需要自己配置
4. 需要定制簡(jiǎn)潔、方便、多功能的npm命令

1. 先配置servere，使用express搭建開(kāi)發(fā)服務(wù)器，

var express = require('express');
var path = require('path');
var fs = require('fs');
var fse = require('fs-extra');
var child_process = require('child_process');
var proxyMiddleware = require('http-proxy-middleware')
var config = require('./config');
var proxyTable = config.proxyTable
var app = express();

/*
 * 我們將express的靜態(tài)資源目錄直接定位到我們打包后的目錄，
 * 這樣有幾個(gè)好處
 * 1. fis3打包后靜態(tài)資源地址是/static, /script等絕對(duì)地址，  
 *    這樣的地址可以和express服務(wù)的靜態(tài)資源地址無(wú)縫結(jié)合
 * 2. fis3打包后的html文件在打包目錄的根目錄里，這樣express把html文件也當(dāng)作靜態(tài)資源請(qǐng)求  
 *    免去配置express路由的問(wèn)題，新添加html頁(yè)面也不用重新服務(wù)器
 * 3. express模板引擎一類的東西統(tǒng)統(tǒng)不用去配
 */
app.use(express.static(config.assetsPublicPath))

/*
 * 由于fis3的proxy接口轉(zhuǎn)發(fā)是有問(wèn)題的，我們需要自己配置，這也很簡(jiǎn)單  
 * 我們使用 http-proxy-middleware 這個(gè)中間件，配置也很簡(jiǎn)單，可以訪問(wèn)github進(jìn)行查看
 */

Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})


/*
 * 服務(wù)器啟動(dòng)部分，為了使用socket.io我們需要按下面的方式啟動(dòng)服務(wù)器
 * 使用socket.io是為了監(jiān)測(cè)到fis3打包后的文件目錄有變化，向頁(yè)面觸發(fā)重新加載命令
 * 實(shí)現(xiàn)代碼改動(dòng)頁(yè)面自動(dòng)刷新功能
 * 如果不需要此功能，可能使用express啟動(dòng)服務(wù)器
 */
var server = require('http').createServer(app);
var io = require('socket.io')(server);
io.on('connection', function(){});

if(!fs.existsSync(config.assetsRoot)) {
    fs.mkdirSync(config.assetsRoot)
}
/*
 * fis3 release命令會(huì)監(jiān)測(cè)文件變化，
 * 特別注意：fis3測(cè)控整個(gè)項(xiàng)目的文件變化，而fs.watch只監(jiān)測(cè)打包后的文件目錄變化
 * 使用fs.watch打包目錄變化，觸發(fā)reload事件
 */
fs.watch(config.assetsRoot, function(eventType, filename) {
    // console.log(eventType, filename)
    io.emit('reload')
})
// server.listen(3000);
var aserver = server.listen(config.port, function() {
    var host = aserver.address().address;
    var port = aserver.address().port;
    console.log('App listening at http://%s:%s', host, port);
    doChildprocess();
})

/*
 * fs3 release部分，執(zhí)行帶監(jiān)測(cè)參數(shù)的命令，
 * 這里的命令要使用子進(jìn)程進(jìn)行執(zhí)行了，
 */
function doChildprocess() {
    var cmdCli = 'fis3 release dev -wl -d ./web-demo-v3';
    var cpRelease = child_process.exec(cmdCli);
    cpRelease.stdout.pipe(process.stdout);
}

2. 簡(jiǎn)單配置如下

var path = require('path');
var helpers = require('./helpers.js');
var build_env = helpers.getBuildEnv();
var proxyTarget = helpers.getProxyTarget();
module.exports = {
    assetsPublicPath: './web-demo-v3',
    assetsRoot: path.resolve(__dirname, '../web-demo-v3'),
    port: '8081',
    proxyTable: {
        '/web-demo-v3/api': {
            target: proxyTarget,
            changeOrigin: true,
            pathRewrite: {
              '^/web-demo-v3/api': '/web-demo-v3/api'
            }
        },
    }
}

3. 執(zhí)行生產(chǎn)環(huán)境build操作時(shí)部分

var child_process = require('child_process');
var config = require('./config');
var cmdCli = 'fis3 release prod -d ' + config.assetsRoot;
var cpRelease = child_process.exec(cmdCli);
cpRelease.stdout.pipe(process.stdout);

// 這里就很簡(jiǎn)單了

4. 為了使頁(yè)面自動(dòng)刷新，頁(yè)面需要配置如下代碼

<div id="Manager_content"></div>
<% if(metadata.env!='prod'){ %>
<script src="https://cdn.bootcss.com/socket.io/2.0.4/socket.io.js"></script>
<script type="text/javascript">
    var socket = io();
    socket.on('reload', function() {
        window.location.reload();
    })
</script>
<% } %>

這里就牽到fis3解析ejs語(yǔ)法的問(wèn)題了，頭大了嗎？
fis3的官方文檔看了好久，也沒(méi)找到合適的配置說(shuō)明，那么只好自己寫(xiě)個(gè)插件了，
[fis3-parser-html-plugin][https://github.com/twolun/fis3-parser-html-plugin]，簡(jiǎn)單配置使用

fis-conf.js中配置：

.match('/html/(*.html)', {
    release: './$1',
    parser: fis.plugin('html-plugin', {
        env: 'prod'
    })
})
// 

其實(shí)插件的配置，也就插件后面的參數(shù)部分會(huì)被傳到頁(yè)面中，供ejs解析
fis3-parser-html-plugin插件代碼其實(shí)很簡(jiǎn)單，要詳細(xì)了解就要查看ejs語(yǔ)法了

var ejs = require('ejs');
module.exports = function (content, file, settings) {
    if(!file.isHtmlLike) return content;
    return ejs.render(content, {metadata: settings});
}
// 注意此處的settings，就是fis-conf.js中配置的settings

5. [fis3-parser-html-plugin][https://github.com/twolun/fis3-parser-html-plugin]

這個(gè)插件是我一沖動(dòng)寫(xiě)的，太沖動(dòng)了

6. 項(xiàng)目源碼地址

[web-demo-v3][https://github.com/twolun/web-demo-v3]