FIS3简单应用小型项目配置

原创 Lin_Grady 教程 框架/库 248阅读 2018-12-19 19:59:38 举报

前言

之前花了三篇文章讲述怎么从零开始搭建起一个基础的webpack4+React的脚手架,然后因为有些小项目不需要用到这么复杂的打包器去构建,这里分享一款项目中使用的简单配置的脚手架.

FIS3 是什么?

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。

但是好像开发团队都散了,现在已经是弃置的样子,好几年没有消息,特别是Nodejs支持版本只到@6,所以如果对这方面有要求的话不建议使用,简单了解下即可.

因为这里摘抄了fis3构建流程和官网一些常用语法,更详细可以直接看官网,知道的就直接往下拉到配置部分

FIS3 , 为你定制的前端工程构建工具

Node 版本管理

因为Fis3的Node版本要求 0.8.x,0.10.x, 0.12.x,4.x,6.x,不在此列表中的版本不予支持

我们可以安装一个版本管理器,根据需求切换.
nvm-windows

安装版本

移除版本

查看已安装版本

切换版本

我们选择系列最新的@6.14.4版本安装

一些具体的包管理器等可以参考我之前的章节,这里不复述了.

webpack4从零开始构建(一)

安装 FIS3

  • -g 安装到全局目录,必须使用全局安装,当全局安装后才能在命令行(cmd或者终端)找到 fis3 命令
  • 安装过程中遇到问题具体请参考 fis#565 解决

安装完成后执行 fis3 -v 判断是否安装成功

命令行提供了以下功能

声明依赖

FIS3 在执行编译的过程中,会扫描这些编译标记,从而建立一张 静态资源关系表,资源关系表详细记录了项目内的静态资源id、发布后的线上路径、资源类型以及 依赖关系 和 资源打包 等信息。使用 FIS3 作为编译工具的项目,可以将这张表提交给后端或者前端框架去运行时,根据组件使用情况来 按需加载资源或者资源所在的包,从而提升前端页面运行性能。

工作原理

FIS3 是基于文件对象进行构建的,每个进入 FIS3 的文件都会实例化成一个 File 对象,整个构建过程都对这个对象进行操作完成构建任务。

整个 FIS3 的构建流程大体概括分为三个阶段。
1, 扫描项目目录拿到文件并初始化出一个文件对象列表
2, 对文件对象中每一个文件进行单文件编译
3, 获取用户设置的 package 插件,进行打包处理(包括合并图片)

单文件编译流程

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

打包处理

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

文件指纹

文件指纹,唯一标识一个文件。在开启强缓存的情况下,如果文件的 URL 不发生变化,无法刷新浏览器缓存。一般都需要通过一些手段来强刷缓存,一种方式是添加时间戳,每次上线更新文件,给这个资源文件的 URL 添加上时间戳。

而 FIS3 选择的是添加 MD5 戳,直接修改文件的 URL,而不是在其后添加 query

资源定位

定位资源能力,可以有效地分离开发路径与部署路径之间的关系,工程师不再关心资源部署到线上之后去了哪里,变成了什么名字,这些都可以通过配置来指定。而工程师只需要使用相对路径来定位自己的开发资源即可。这样的好处是:资源可以发布到任何静态资源服务器的任何路径上而不用担心线上运行时找不到它们,而且代码具有很强的可移植性,甚至可以从一个产品线移植到另一个产品线而不用担心线上部署不一致的问题。

在html中定位资源

FIS3 支持对html中的script、link、style、video、audio、embed等标签的srchref属性进行分析,一旦这些标签的资源定位属性可以命中已存在文件,则把命中文件的url路径替换到属性中,同时可保留原来url中的query查询信息。

相关配置

实际结果

在js中定位资源

js语言中,可以使用编译函数 __uri(path)来定位资源,fis分析js文件或 html中的script标签内内容 时会替换该函数所指向文件的线上url路径。

在css中定位资源

内容嵌入

嵌入资源即内容嵌入,可以为工程师提供诸如图片base64嵌入到css、js里,前端模板编译到js文件中,将js、css、html拆分成几个文件最后合并到一起的能力。有了这项能力,可以有效的减少http请求数,提升工程的可维护性。

html

在html中可以嵌入其他文件内容或者base64编码值,可以在资源定位的基础上,给资源加 ?__inline 参数来标记资源嵌入需求。
html中嵌入图片base64

html中嵌入样式文件

html中嵌入脚本资源

html中嵌入页面文件

在js中嵌入资源

在js中,使用编译函数 __inline() 来提供内容嵌入能力。可以利用这个函数嵌入图片的base64编码、嵌入其他js或者前端模板文件的编译内容, 这些处理对html中script标签里的内容同样有效。

在js中嵌入js文件

在js中嵌入图片base64

在js中嵌入其他文本文件

在css中嵌入资源

与html类似,凡是命中了资源定位能力的编译标记, 除了src="xxx"之外,都可以通过添加?__inline编译标记都可以把文件内容嵌入进来。src="xxx"被用在ie浏览器支持的filter内,该属性不支持base64字符串,因此未做处理。

在css文件中嵌入其他css文件

在css中嵌入图片的base64

发布到远端机器

当我们开发项目后,需要发布到测试机(联调机),一般可以通过如 SMB、FTP 等上传代码。FIS3 默认支持使用 HTTP 上传代码,首先需要在测试机部署上传接收脚本(或者服务),这个脚本非常简单,现在给出了 php 的实现版本,可以把它放到测试机上某个 Web 服务根目录,并且配置一个 url 能访问到即可。

假定这个 URL 是:http://cq.01.p.p.baidu.com:8888/receiver.php

那么我们只需要在配置文件配置

文件目录结构

从上面就知道FIS3 是基于文件对象进行构建的,首先我们要定义好文件目录

切记: 配置文件是具体针对项目文件夹路径打包,不能随意改动

打包目录结构

安装依赖

时间关系直接附上,先安装完之后再讲解

package.json

里面有两个命令分别执行开发环境和生产环境

参数回顾上面介绍命令行功能即可.为了方便使用不用每次打开终端,我们写两个执行文件

dev.cmd

prod.cmd

双击文件即可自动打开终端执行

配置文件

根目录新建fis-conf.js,每次执行命令都会读取这里的配置去构建

忽略文件

因为fis3是根据文件打包,不像webpack4根据依赖解析,所以我们需要声明哪些文件不被加入构建队列中

样式处理

指向样式目录覆盖所有文件

  • 支持sass/scss处理
  • 指定浏览器版本自动添加前缀

脚本处理

  • ES6兼容
  • 支持js里require脚本和样式

页面&图片处理

先不做处理,单纯输出指定位置

依赖处理

这个是打包的关键配置,可以直接使用打包相关依赖的文件,如果对打包顺序有要求的话需要自己控制.当然还有很多插件帮你更好处理.这是最基础的用法.当下以我的本地测试代码设置

输出位置

首先需要指定打包路径,我们根据不同环境配置一下,到时候代码里所有相关路径都会被转成绝对路径.

开发环境打包配置

意思就是将代码打包到baseDir路径,里面的资源地址全部转成绝对路径devDir+url

生产环境我们可以进行更多针对性操作

基本配置到此就完成了,我们可以测试效果看看

用例

新建pages/index.html

然后根据里面对应的位置加上些资源执行命令即可,最终输出如下

最终我们得到的输出资源如上.至于被合并的资源应该有办法忽略不让输出,但是我没去找

还有当前项目没有引入模块插件,只是单纯讲解打包,有需要自行研究.

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复