fis3阅读笔记

1.起步

1.1. 前端语言缺少三种的语言能力:
  • 资源定位的能力:使用开发路径进行资源定位,项目发布后转换成部署路径
  • 依赖声明的能力:声明一个资源依赖另一个资源的能力
  • 资源嵌入的能力:把一个资源的编译内容嵌入到另一个文件中

    fis基本上在完善前端语言所缺少三种的语言能力

fis3

1.2. 命令集合
  • fis3 release -d [path] //发布
  • fis3 release -wL//调试
  • fis3 inspect //查看文件命中属性的情况
  • fis3 server [open|start]//调试
  • fis3 init //初始化
  • fis3 install //安装由fis-components提供的组件
1.3. 配置

默认配置文件为 fis-conf.js,FIS3 编译的整个流程都是通过配置来控制的。FIS3 定义了一种类似 CSS 的配置方式。固化了构建流程,以期让工程构建变得简单。

配置接口

  • fis.set(key, value)
  • fis.get(key)
  • fis.match(selector, props[, important])
  • fis.media()
  • fis.plugin(name [, props [, position]])
    获取更多

配置参数

  • release //设置文件的产出路径
  • packTo //分配到这个属性的文件将会合并到这个属性配置的文件中
  • packOrder //用来控制合并时的顺序,值越小越在前面。配合 packTo 一起使用。
  • query //指定文件的资源定位路径之后的query,比如’?t=123124132’。
  • id //指定文件的资源id。默认是 namespace + subpath 的值
  • url //指定文件的资源定位路径,以 / 开头。默认是 release 的值,url可以与发布路径 release 不一致。
  • charset //指定文本文件的输出编码。默认是 utf8,可以制定为 gbk 或 gb2312等。
  • isHtmlLike //指定对文件进行 html 相关语言能力处理
  • isCssLike //指定对文件进行 css 相关语言能力处理
  • isJsLike //指定对文件进行 js 相关语言能力处理
  • useHash //文件是否携带 md5 戳
  • domain //给文件 URL 设置 domain 信息
  • rExt //设置最终文件产出后的后缀
  • useMap //文件信息是否添加到 map.json
  • isMod //标示文件是否为组件化文件。
  • extras //在[静态资源映射表][]中的附加数据,用于扩展[静态资源映射表][]表的功能
  • requires //默认依赖的资源id表
  • useSameNameRequire //开启同名依赖
    获取更多

插件属性

  • lint
  • parser
  • preprocessor
  • standard
  • postprocessor
  • optimizer
  • packager
  • spriter
  • deploy
    获取更多
1.4 glob 规则
1.4.1 常用规则
  • * 匹配多个除了 /以外的字符
  • ? 匹配单个除了/以外的字符
  • ** 匹配多个字符包括/
  • {} 可以让多个规则用 , 逗号分隔,起到或者的作用
  • ! 出现在规则的开头,表示取反。即匹配不命中后面规则的文件
1.4.2 特殊用法(类 css 伪类)
  • ::package 用来匹配 fis 的打包过程。
  • ::text 用来匹配文本文件。
  • ::image 用来匹配文件类型为图片的文件。
  • *.html:js 用来匹配命中的 html 文件中的内嵌的 js 部分。
  • *.html:css 用来匹配命中的 html 文件中内嵌的 css 部分。
1.5 内置插件

fis3 中内嵌了很多常用的插件。

  • fis-optimizer-clean-css //用于压缩 css
  • fis-optimizer-png-compressor //用来压缩 png 文件
  • fis-optimizer-uglify-js //用来压缩 js 文件
  • fis-spriter-csssprites //针对 css 规则中的 background-image 做图片优化
  • fis3-deploy-local-deliver
  • fis3-deploy-http-push
  • fis3-hook-components
  • fis3-packager-map

如何安装插件?如何开发插件?

2. 工作原理

其中打包处理开了四个扩展点,通过用户配置启用某些插件。

  • prepackager 打包前处理插件扩展点
  • packager 打包插件扩展点,通过此插件收集文件依赖信息、合并信息产出静态资源映射表
  • spriter 图片合并扩展点,如 csssprites
  • postpackager 打包后处理插件扩展点

单文件编译流程

  • lint 代码校验检查,比较特殊,所以需要 release 命令命令行添加 -l 参数
  • parser 预处理阶段,比如 less、sass、es6、react 前端模板等都在此处预编译处理
  • preprocessor 标准化前处理插件
  • standard 标准化插件,处理内置语法
  • postprocessor 标准化后处理插件

3. 高级应用

4. 拓展阅读

罐头很懒 (⊙v⊙)<br><br>工作日日常 :<br>do {<br>&nbsp;&nbsp;打代码<br>} while ( 发呆 || 吃饭 )<br><br>周末日常 :<br>( 鱼罐头 || 午餐肉 || 炸鸡块 ) +<br>( 罐可乐 || 瓶啤酒 ) +<br>( 盒仔饭 || 艇仔粥 || 即食面 ) +<br>( 轻音乐 || 肥皂剧 || 热网综 ) +<br>( 水果糖 || 甜布丁 )