Fis 打包工具
-
Fis 的组成:
工具:提供了命令行,在 node 的基础上做了优化
插件:一些 npm 包,实现了对插件的安装 -
Fis 旨在解决:
代码模块化:提供了模块化插件
性能优化: 提供了压缩,合并,打包,缓存插件
自动化: 基于文件的流水线工作模式 (校验,编译,打包,发布),只需配置,即可完成
代码规范: 插件处理需要对代码进行相应的标记
-
Fis工作原理:
读取项目目录下的所有文件
读取配置文件,根据 match 规则,构建 File 对象
编译 File ,使用配置的插件处理文件内容
打包产出
-
Fis 的覆盖规则:
同名属性覆盖,不同名属性追加
Fis 的处理流程(基于文件的流水线工作模式)
-
Fis 的主要功能
内容嵌入:内容嵌入实例参考https://fex.baidu.com/fis3/docs/user-dev/inline.html
定位资源:定位资源实例参考
https://fex.baidu.com/fis3/docs/user-dev/uri.html声明依赖:声明依赖实例参考
https://fex.baidu.com/fis3/docs/user-dev/require.html Fis 的常用插件
1.Parser插件
Fis-parser-less-2.x:支持less编译成css
Fis-parser-node-sass:支持sass/scss编译成css
2.Preprocessor插件
自动给 css 属性添加前缀,让标准的 css3 支持更多的浏览器
3.optimizer插件
压缩js文件,Css文件,Png图片
4.package插件 打包到指定目录
静态资源前端加载器,纯前端项目必备插件。自动加载页面中用到的资源,同时还能按页面级别的All In One 打包。此插件会收集所有的资源,如果希望某个资源不被收集,请在资源结尾处如 后面加上 注释
5.hook插件
fis3 已经默认不自带模块化开发支持,如果需要采用 commonjs 规范作为模块化开发,使用该插件
注意:需要对目标文件设置 isMod 属性,说明这些文件是模块化代码。
6.Deploy插件
Fis3-deploy-http-push 将产出文件通过http post到目标服务器