FIS使用经验 - Web前端当前位置:& &&&FIS使用经验FIS使用经验&&网友分享于：&&浏览：0次FIS使用心得
百度web前端研发部F.I.S团队，经过一年多的努力，推出的一套前端集成解决方案，解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。
自己也小小 的研究了一下，从官网了解到fis已经历三个版本，目前是fis3的版本，功能更加易学易用，极大的提高了开发效率。
下面列出fis(2)版本的配置文件，供大家参考使用:
fis-conf.js
// CMD: fis server --root D:\web\fis-www-root start
// CMD: fis release --dest online --domains
// CMD: fis release --dest stg --domains
// CMD: fis release --dest local --domains
//fis.config.set('project.fileType.text', 'shtml');
fis.config.merge({
project : {
fileType : {
text : 'tpl, shtml'
settings: {
postprocessor: {
type: 'amd'
roadmap : {
"assets/css/**.css" : "",
"**.js" : ""
//所有的js文件
reg : '**.*',
//发布到/static/js/xxx目录下
release : '/$&',
//访问这些url是
url : '/app_js/huiyuan$&'
//是类html文件，会进行html语言能力扩展
//isHtmlLike : true
to: "d:/web/fis-www-root/huiyuan",
replace : {
from : '/assets',
to: "d:/web/fis-www-root/huiyuan",
replace :{
from : '',
to: "d:/web/fis-www-root/huiyuan",
replace : {
from : '',
//如果配置了receiver，fis会把文件逐个post到接收端上
//receiver : '/path/to/receiver.php',
//从产出的结果的static目录下找文件
from : '/output',
//保存到远端机器的/home/fis/www/static目录下
//这个参数会跟随post请求一起发送
to : '/home/fis/www/',
//通配或正则过滤文件，表示只上传所有的js文件
include : '**.js',
//widget目录下的那些文件就不要发布了
exclude : /\/widget\//i,
//支持对文件进行字符串替换
replace : {
from : '',
modules: {
postprocessor: {
tpl: 'amd',
// css背景图片合并
fis.match('::packager', { spriter: fis.plugin('csssprites') });
// 是 否使用hash
fis.match('*', { useHash: false });
fis.match('*.js', { optimizer: fis.plugin('uglify-js') });
// css 使用cssSprite方式
fis.match('*.css', { useSprite: true, optimizer: fis.plugin('clean-css') });
// png图片压缩
fis.match('*.png', { optimizer: fis.plugin('png-compressor')});
// 将所有.css,.less文件，合并生成到/static/aio.css
fis.match('*.{css,less}', {
packTo: '/static/aio.css'
// 解析less文件为css文件并修改后缀
fis.match('*.less', {
// fis-parser-less 插件进行解析
parser: fis.plugin('less'),
// .less 文件后缀构建后被改成 .css 文件
rExt: '.css'
fis.match('*', {
release: '/static/$0' // 所有资源发布时产出到 /static 目录下
fis.match('*.php', {
release: '/template/$0' // 所有 PHP 模板产出后放到 /template 目录下
//fis3-hook-module
fis.hook('module', {
mode: 'amd' // 模块化支持 amd 规范，适应 require.js
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有解决fis3本地开发编译GBK页面的乱码问题
前言关于乱码分析，这里简单说一下：决定chrome浏览器(可能每个浏览器表现不一样)最终显示的页面是否乱码是有三个因素决定的：1- http 返回头 Content-Typefis server里面决定返回头编码2- &meta charset=&xxx&&写代码的时候，在html头部决定的3- 网页文件编码使用fis3工具，是fis-conf.js的配置解决最终编译后的文件编码fis.set('charset',&'gbk');
fis.set('project.charset',&'gbk');只有这三个因素一致才不会乱码，缺一都会乱码，有兴趣的可以亲自测试下。在做gbk项目时，发现fis3本地编译预览出来的页面都是乱码，后来发现原来fis3 server无论编译gbk还是utf-8，http返回头都是utf-8，所以就出现乱码情况了。解决方案http 返回头是可以带有 charset 信息，所以，也就是可以不带了，也就是说三个因素，我们可以减少这个服务器的决定因素解决步骤：修改 fis3-server-node 的 app.js在自己电脑本地，打开C盘，找到fis3的安装路径（非server路径）：npm\node_modules\feg\node_modules\fis3\node_modules\fis3-server-node，具体路径如下图，找到 fis3-server-node 的 app.js 这个文件：我们需要修改一下脚本开头的代码，让它取消了返回头带charset信息。修改后的代码如下：var&express&=&require('express');
var&args&=&process.argv.join('|');
var&port&=&/\-\-port\|(\d+)(?:\||$)/.test(args)&?&~~RegExp.$1&:&8080;
var&https&=&/\-\-https\|(true)(?:\||$)/.test(args)&?&!!RegExp.$1&:&
var&path&=&require('path');
var&DOCUMENT_ROOT&=&path.resolve(/\-\-root\|(.*?)(?:\||$)/.test(args)&?&RegExp.$1&:&process.cwd());
var&bodyParser&=&require('body-parser')
var&app&=&express();
var&mime&=&require('mime-types');
app.use(function(req,&res,&next)&{
&&&&res.set({'Content-Type':&&mime.lookup(req.path)+';charset='});
&&&&next();
...注意，一定要把修改返回头的 app.use() 代码段放在最前位置。这里我们引入了一个新的包，var mime = require('mime-types');，这个包的作用是为了识别请求资源的 MIME 类型，然后返回正确的 MIME 值到 Content-Type 里。复制一个 mime-types 包到 node_modules 目录里，就地取材，如下图：改完后重启 fis3 服务器，清除缓存刷新浏览器，应该就可以看到正常的页面了。
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
关注w3cmark
微信公众号
w3cmark_comfis3和gulp都在用，fis3因为做了好多封装，配置起来很简单，只需要引入插件指向对应文件即可，更适合一些小demo；gulp配置相对麻烦一点，但是功能强大，更适合做架构，支持大的项目。本文是在已安装node、npm的情况下进一步安装fis3。
支持功能：
内容嵌入（主要针对图片）、less、自动生成雪碧图、压缩css和js、自动刷新
安装fis3，请注意mac用户安装时前面加sudo，即sudo npm install -g fis3
npm install -g fis3
npm install -g fis-parser-less
npm install -g fis3-postpackager-loader
fis3 release -d D:/file/demo...
//发布路径
fis3 server start --www
//自定义绝对路径
fis3 release -wL
//开启自动刷新
fis-config.js
fis.match('*.{png,js,css}', {
release: '/static/$0',
useHash: true
//添加MD5戳，用于强刷缓存
fis.match('*.js', {
optimizer: fis.plugin('uglify-js')
fis.match('*.png', {
optimizer: fis.plugin('png-compressor')
fis.match('::package', {
spriter: fis.plugin('csssprites')
fis.match('*.{css,less}',{
optimizer: fis.plugin('clean-css')
fis.match('*.css', {
useSprite: true
fis.match('*.{less,sass}', {
parser: fis.plugin('less'),
// fis-parser-less 插件进行解析
rExt: '.css',
// .less 文件后缀构建后被改成 .css 文件
isCssLike: true
fis.config.set('settings.spriter.csssprites', {
htmlUseSprite: true,
//开启模板内联css处理,默认关闭
styleReg: /(&style(?:(?=\s)[\s\S]*?["'\s\w\/\-]&|&))([\s\S]*?)(&\/style\s*&|$)/ig, //默认&style&&/style&标签的匹配正则
//雪碧图缩放比例
margin: 10,
//图之间的边距
layout: 'matrix'
//使用矩阵排列方式，默认为线性`linear`
阅读(...) 评论()系统将自动刷新
Fork 将在后台执行，是否继续？
最后提交于
Loading...
Avalon-OniUI-RequireJS-FIS3
在开始写这篇说明之前，请允许我向以下人员致敬，是他们的指点才让我最终选择了这样的架构：


 去哪儿网前端架构师，AvalonJS、mass-Framework等框架的作者，著有《》。
 前百度工程师，FIS项目开发者之一，现任职UC。他在github上有几篇文章写得非常好，有兴趣可以一读、，其他的文章可以关注他的github blog。
以及Javascript罗浮宫5群所有给予我热心帮助的人。

为什么选择了Avalon

“我们需要做一个O2O产品，但是我们的前端开发资源并不是很多，我希望能有一个框架像AngularJS那样简化前端人员的工作量，而且有很多现成的组件可以使用，并且要支持到IE8。” ——老板如是说


听完我的心拔凉拔凉的，这意味着我要放弃使用了两年的AngularJS了（IE8又增加了我对它的仇恨值），AngularJS 1.2版本虽然兼容IE8，但也有很多蛋疼的地方，并且核心团队不再解决IE8上的问题了。当然，放弃AngularJS并不仅仅只是兼容性问题，AngularJS其实我感觉还是比较适合做SPA（单页面应用程序），因为框架对于做多页应用来说我觉得显得有点杀鸡用牛刀的感觉（AngularJS其实有很多功能是用不上的，但不支持定制，而且整个框架不断添加一些东西最后就变得很重了）。另一方面是性能问题，饱受争议的脏值检查问题，当然这对于框架本身来说并不能说是缺点，但你没方法阻止开发人员滥用（不严格要求自己的码农随便到网上copy了些能实现自己功能的东西就这样commit了，最后有性能问题还是找架构师），AngularJS最大的优点是视图绑定，但也是缺点，在使用AngularJS的两年里，出现了很多页面层层嵌套绑定的情况，然后页面就卡死了，即使不卡，chrome打开的一个AngularJS Web App就占了900M内存。

其实老板的意思很明显了，我们需要一个支持IE8的MVVM或类似的框架，因为大家都用得很爽。度娘一遍，发现有以下几个框架：


：很多人拍手叫好，查了一些资料和Demo，发现ReactJS只是一个View，它很适合用来开发真正的Web Component，其JS + Html的写法个人不太喜欢，而且这和AngularJS的用法大相庭径（虽然要放弃AngularJS，但好歹也换个相似的免得学习成本太高），并且ReactJS要兼容IE8得加插件，不知道会遇到什么坑。
：原生JS操作Dom，没有view binding，相当于jQuery + template，放弃。
：微软团队出品，支持IE6，写法和AngularJS及其相似！！！我想这就是我需要的东西了...然后我发现KnockoutJS并没有什么UI库可以用，而且Google了一下发现有的评测显示其性能并不是很好（没有亲测，仅供参考）。
：用法和Angular类似，体积小无依赖，有系统的文档和人气较高的社区...可惜不支持IE8，放弃。
：它的logo（老鼠）还挺可爱的，虽然是与AngularJS相似的MVVM框架，但还是有很多地方不同，Handlebars的使用，使得DOM中充满了&script&标记，有时很难分辨出哪些代码是自己的，对CSS样式和其它框架的整合也造成了一定影响，弃用。
：写法和AngularJS极其相似，没有其它依赖，源码小，有一个组件库，重要的是兼容到IE6！虽然文档比较乱社区也不是很活跃，但是能在Q群里联系到原作者，于是我心中突然有一种感觉：就是你了！

选好了框架/库，接下来就是考虑构建优化了
Web构建工具其实我只使用过Grunt和Yeoman，但是Team当中的开发人员基本就不知道有这些玩意，要重新学干脆考虑一下比较火的gulps，发现学习成本也不低，偶然发现了百度出品的，这东西好就好在傻瓜式全套服务啊！就它了，还需要别的理由吗？
好了，构建优化也有了，接下来就是模块化开发框架了
为什么要模块化开发？分而治之！按需加载！组件重用！其实AvalonJS是自带模块加载器的，但是我暂时还没用过AvalonJS，不知道其AMD规范是否和RequireJS一样，担心FIS3对其AMD支持不够（后来发现这种担心可能是多余的，有兴趣的朋友可以试试直接用自带的加载器），所以选择了第三方的模块加载器RequireJS，并使用AvalonJS Shim版本（去掉模块加载器的版本）
组件开发
不重复造轮子，在面向对象编程中是很重要的思想（虽然我没有对象），如果什么组件都自己写，估计加班狗永远都找不到对象了，于是为了能找到对象，我们要充分利用好面向对象思想。拥有丰富的组件库，丑是丑了点...但是有需求可以自己快速修改（分而治之的优势体现出来了）。FIS3很好的支持了内容嵌入，这样有很多Template组件就可以很方便被嵌入到页面了，比如页头和页脚。
关于这个框架的使用
下面将简单介绍一下这个框架的使用以及需要注意的地方（我想最大的意义不在于这个框架本身，而在于搭建这个框架过程中遇到的问题及解决办法）。
目录结构


工程目录下面有四个子目录和一个名为'fis-config.js'文件，'fis-config.js'是构建所需的配置文件，详细用法见官方文档，注意点我会在后面说。components用于存放组件，既可以是交互组件（widget）也可以是功能组件（如自己封装的ajax）。statics用于存放静态资源文件（images、css等）。vendor用于存放第三方库文件（avalon、jquery、require等）。views用于存放业务视图（包括业务自身相关的html、css、javascript文件），按照业务模块我们又分为module（如home、welcome等）。
运行demo
FIS3的安装请参考官网文档，这里不再赘述。建议用Webstorm打开工程，首先你要安装fis3-amd-hook、fis-parser-less、fis3-postpackager-loader等插件并打开自带终端Terminal，在终端输入fis3 release命令行开始构建（默认是发布到FIS3自带的server目录，你可以加上参数-d path指定构建目录，不够前期需要调试还是默认自带目录比较方便），然后通过命令行fis3 server start就可以run demo了，默认浏览地址是 ，但是端口号有可能被占用了，你可以通过参数-p指定端口号，打开demo目录下的demo.html，就可以浏览到demo了。
demo说明
这个demo结合FIS3介绍了一些avalon的基本用法，比如双向绑定，模板，路由，使用OniUI以及编写自定义Avalon组件。需要注意的是，使用avalon路由mmState（路由里面需要require支持）的时候由于用到了FIS3的构建插件fis3-hook-amd，所以在构建的时候它会根据amd编程规范生成一个map去映射文件路径，就是相当于require里面的paths配置，一开始以为是这个插件的issue，所以报了个给插件开发者，错怪了它，大家可以看看这个issue的对话，就明白了。所以，如果你是动态配置路径，一定要这样配置path：


在js文件最顶端加注释@require.async "../welcome/welcome.js" 然后用_moduleID说明要处理的url，controllerUrl: _moduleId("../welcome/welcome.js")

总结
这个简易的框架只是一次简单的尝试，尤其是希望把avalon和fis3结合使用的人，对于打包，avalon的作者是提倡使用webpack的，所以这个demo仅供大家作为选用框架的参考，有说得不对的地方还请大家指教。

项目点评 (0 条)
你可以在登录后,对此项目发表评论你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
在本地虚拟机上安装无问题，是按照官方文档进行安装，ip分配方式是DHCP
在内网服务器上，桥接网络，安装kubernetes完成后，此时ip分配方式仍然是DHCP，启动无错，但是修改ip成static 重启network 重启apiserver，此时 apiserver启动失败。。。
难道kubernetes 一定要有DHCP服务吗？
有哪位路过的大神遇到过这样的问题
master 和 minion 是内网交换机链接的（没有使用路由）
Dec 16 23:34:06 localhost kube-apiserver: F:06.903901
2995 controller.go:80] Unable to perform initial IP allocation check: unable to refresh the service IP block: 501: All the given peers are not reachable (failed to propose on members [] twice [last error: Get
dial tcp 192.168.192.138:2379: connection refused]) [0]
参考文件的这段networkd and DHCP behavior，原文提到
By default, even if you've already set a static IP address and you have a working DHCP server in your network, systemd-networkd will nevertheless assign IP address using DHCP. If you would like to remove this address, you have to use the following cloud-config example:大致说如果你的网路环境下有DHCP服务器，即使你手动设置的静态ip地址，那systemd-networkd还是先用DHCP分发的ip地址. 这是个坑呀！！！
这是我安装coreos的cloud-init.yaml档案的截取内容
以下过程执行了
1. 先停止systemd-networkd
2. 利用00-enp0s3.network配置一个静态ip
3. down-interfaces.service用来重置网卡设备
4. 再重新启动systemd-networkd
-&name:&&systemd-networkd.service&
&&command:&&stop&
-&name:&&00-enp0s3.network&
&&runtime:&true
&&content:&|
&&&&[Match]
&&&&Name=enp0s3&#确认自己的网卡名称
&&&&[Network]
&&&&DNS=192.168.31.1&#自行修改
&&&&Address=192.168.31.244/24&&#修改成你的
&&&&Gateway=192.168.31.1&&#自行修改
-&name:&&down-interfaces.service&
&&command:&&start&
&&content:&|
&&&&[Service]
&&&&Type=oneshot
&&&&ExecStart=/usr/bin/ip&link&set&enp0s3&down&&#确认自己的网卡名称
&&&&ExecStart=/usr/bin/ip&addr&flush&dev&enp0s3&&#确认自己的网卡名称
-&name:&&systemd-networkd.service&
&&command:&&restart&
期望能帮到你，如有不正确之处也请订正
Dec 16 23:34:06 localhost kube-apiserver: F:06.5 controller.go:80] Unable to perform initial IP allocation check: unable to refresh the service IP block: 501: All the given peers are not reachable (failed to propose on members [] twice [last error: Get
... alse: dial tcp 192.168.192.138:2379: connection refused]) [0]
这个是连不上ETCD的保持
192.168.192.138 netstat -natp | grep etcd 看看监听的ip和端口是不是正确的
要回复问题请先或
浏览: 1396
关注: 4 人