查看fis3 插件

如何写fis3 插件以fis访问iconfont 插件为例，描述iconfont访问方案的一般流程:同步svg，将项目中使用的svg同步到项目目录，通过iconfont平台编译svg。生成字体文件访问字体相关的css问题html导入css文件单个文件编译处理图标font总的逻辑是:遍历项目目录下的所有SVG，生成字体文件，生成css所有业务html导入css配置:fis.match(/*， html 。

FIS3是百度开发的前端构建工具。默认配置文件为fisconf.js，更详细的介绍请参考FIS3官方文档。这里介绍如何使用FIS3和VueJS构建单页面应用。FIS3内置了js和css文件的压缩方法。在构建过程中，资源的相对地址会被绝对地址、img、css文件等代替。在默认配置的情况下，资源的相对路径只会改为绝对路径，这是FIS3的资源定位能力，这样在使用时就不会考虑构造后的文件路径。

作者:dmyang链接:来源:知乎版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。Fis/ fis3是grunt和gulp之后优秀的前端工程解决方案。其本质是基于静态资源标记 静态资源表的动态解析，利用特殊的标记方法引用模板和js中的前端资源，在构建时生成一个资源依赖表。在解析的过程中，浏览器或者后端模板语言通过查表就可以得到一个静态资源在不同环境下的引用路径，所以很容易同时支持纯前端渲染(标记方法已经转换为浏览器可以识别)和后端(php，node，java)渲染。

再来说说webpack。其实这个产品是静态打包，entry需要手动配置生成chunk。虽然CommonsChunkPlugin，dll等。插件可以用来辅助提取公共代码，而codesplit是用于懒人加载的，这个粒度很难把握，也很难配置(fis是自动生成依赖关系，自动处理懒人加载)。

其实支持这种技术选择很简单，可以在fisconf.js中添加以下配置第一步:配置支持es6和jsx语法。//让modules目录下的js和jsx传递typescript fis . match( {/modules/* *。JS，*。jsx} ，{//要支持es6和jsx，TypeScript也是胜任的，最重要的是编译速度快了很多。

以fis访问iconfont 插件为例，描述iconfont的访问方案。iconfont的一般流程是同步svg，通过iconfont平台将项目中使用的svg同步到项目目录下编译svg，生成字体文件访问字体相关的css问题html导入css文件单个文件编译处理图标font总的逻辑是:遍历项目目录下的所有SVG，生成字体文件，生成css所有业务html导入css配置:fis.match(/*。 html 。