FIS3是百度开发的一款前端构建工具。
FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。
默认的配置文件是fis-conf.js，一些更具体的介绍可以参考FIS3官方文档，这里介绍一下，使用FIS3和VueJS如何搭建单页面应用。
文件压缩
FIS3已经内置了js，css文件的压缩方式，只需简单的配置压缩器即可
// 压缩css
fis.match('*.css', {
// fis-optimizer-clean-css 插件进行压缩，已内置
optimizer: fis.plugin('clean-css')
});
// 压缩js
fis.match('*.js', {
// fis-optimizer-uglify-js 插件进行压缩，已内置
optimizer: fis.plugin('uglify-js')
});
// 压缩图片
fis.match('*.png', {
// fis-optimizer-png-compressor 插件进行压缩，已内置
optimizer: fis.plugin('png-compressor')
});
资源定位与文件指纹
在构建过程中，会将资源的相对地址替换成绝对地址，img，css文件等，在默认不配置的情况下只是对资源相对路径修改成了绝对路径，这是FIS3的资源定位能力，这样在使用的情况时就不必考虑构建之后的文件路径问题。
FIS3也提供文件指纹功能，相对于其他的在URL后面加上query或者时间戳，FIS3使用MD5戳，直接修改文件的URL
// 加hash
fis.match('*.{js,css,png,jpg}', {
useHash: true
});
// 普通的时间戳
// md5戳
csssprites
对小图标文件进行雪碧图合并，减少请求数量，这里使用了插件fis-spriter-csssprites
fis.match('::package', {
spriter: fis.plugin('csssprites')
})
在背景图的css中加入__sprite
background: url('../images/icon1.png?__sprite');
构建后的背景图片资源会进行自动定位
文件打包
fis.match('::package', {
postpackager: fis.plugin('loader', {
allInOne: true
})
});
这里配置的是将所有文件打包成一个引入页面中，使用插件fis3-postpackager-loader
fis3对npm的node_modules模块的支持
使用fis3-hook-node_modules对node_modules模块支持
// 禁用fis3默认的fis-hook-src
fis.unhook('components');
fis.hook('node_modules');
fis.set('project.md5Connector ', '.');
// 添加commonjs支持 (需要先安装fis3-hook-commonjs)
fis.hook('commonjs', {
baseUrl: './',
paths: {
'component': 'src/component',
'page': 'src/page'
},
extList: ['.js', '.jsx', '.es']
});
// 为node_modules文件添加针对mod.js的转换
fis.match('/node_modules/**.js', {
useSameNameRequire: true,
isMod: true
});
fis.match('/src/**.js', {
useSameNameRequire: true,
isMod: true
});
Vue文件构建
使用fis3-parser-vue-component插件构建vue文件
// 构建vue文件
fis.match('*.vue', {
isMod: true,
rExt: '.js',
useSameNameRequire: true,
parser: fis.plugin('vue-component', {
runtimeOnly: true, // [email protected] 有润timeOnly模式，为ture时，template会在构建时转为render方法， 这里开启后paths中无需指定
// styleNameJoin
styleNameJoin: '', // 样式文件命名连接符 `component-xx-a.css`
extractCSS: true, // 是否将css生成新的文件, 如果为false, 则会内联到js中
// css scoped
cssScopedIdPrefix: '_v-', // hash前缀：_v-23j232jj
cssScopedHashType: 'sum', // hash生成模式，num：使用`hash-sum`, md5: 使用`fis.util.md5`
cssScopedHashLength: 8 // hash 长度，cssScopedHashType为md5时有效
})
}).match('{*.less, *.vue:less}', {
parser: fis.plugin('less'),
postprocessor: fis.plugin('autoprefixer'),
rExt: '.css'
}).match('{api/**.js, store/**.js, src/**.js, config/**.js, *.vue:js, dep/d3.js}', {
parser: fis.plugin('babel-6.x', {
presets: ['es2015', 'stage-3'],
plugins: ['add-module-exports']
}),
rExt: '.js'
});
完整demo