FIS3学习
针对公司项目的配置文件学习。
大部分资料从FIS3官方文档整理。
FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。
文章目录
FIS3:glob
常用规则
*
匹配0或多个除了/
以外的字符?
匹配单个除了/
以外的字符**
匹配多个字符包括/
{}
可以让多个规则用,
分隔,起到或者的作用!
出现在规则的开头,表示取反。即匹配不命中后面规则的文件
- 需要注意的是,fis 中的文件路径都是以
/
开头的,所以编写规则时,请尽量严格的以/
开头。- 当设置规则时,没有严格的以
/
开头,比如a.js
, 它匹配的是所有目录下面的a.js
, 包括:/a.js
、/a/a.js
、/a/b/a.js
。 如果要严格只命中根目录下面的/a.js
, 请使用fis.match('/a.js')
。- 另外
/foo/*.js
, 只会命中/foo
目录下面的所有 js 文件,不包含子目录。 而/foo/**/*.js
是命中所有子目录以及其子目录下面的所有 js 文件,不包含当前目录下面的 js 文件。 如果需要命中 foo 目录下面以及所有其子目录下面的 js 文件,请使用/foo/**.js
。
捕获分组
我们可以用 $1, $2, $3 来代表相应的捕获分组。其中 $0 代表的是 match 到的整个字符串。
fis.match('/a/(**.js)', {
release: '/b/$1' // $1 代表 (**.js) 匹配的内容
});
fis.match('/a/(**.js)', {
release: '/b/$0' // $0 代表 /a/(**.js) 匹配的内容
});
特殊用法(类CSS伪类)
::package
用来匹配 fis 的打包过程。::text
用来匹配文本文件。
如果你希望命中的文件类型不在列表中,请通过fis.set('project.fileType.text')
扩展,多个后缀用 , 分割。
fis.set('project.fileType.text', 'cpp,hhp');
::image
用来匹配文件类型为图片的文件。(如果要添加格式与::text
一样)*.html:js
用来匹配命中的 html 文件中的内嵌的 js 部分。*.html:css
用来匹配命中的 html 文件中的内嵌的 css 部分。*.html:inline-style
用来匹配命中的 html 文件中的内联样式。可以配置些 auto prefix 之类的插件。
配置
默认情况下,配置文件写到 fis-conf.js文件中,此文件放到项目的根目录下,或说有此文件的目录被看做是项目根目录。
当两个规则之间匹配的文件相同时,后设置的可以覆盖前面设置的属性,如果前面规则没有某属性则追加。
配置接口
fis.set(key, value)
设置一些配置。设置的值通过fis.get()
获取。
- key
任意字符串,但系统占用了project
、namespace
、modules
、settings
它们在系统中有特殊含义。
当字符串以.
分割的,.
字符后的字符将会是字符前字符同名对象的键。- value
任意字符串。
fis.get(key)
获取已经配置的属性,和fis.set()
成对使用。
- key 任意字符串
// fis.set('namespace', 'common')
var ns = fis.get('namespace');
// fis.set('a.b.c', 'd')
fis.get('a'); // => {b:{c: 'd'}}
fis.get('a.b'); // => {c:'d'}
fis.get('a.b.c'); // => 'd'
fis.match(selector, props[, important])
给匹配到的文件分配属性,文件属性决定了这个文件进行怎么样的操作。
就像 css 的规则一样,后面分配到的规则会覆盖前面的。
- selector
blob
或者是任意正则- props
文件属性
- important
默认为false。设置了这个属性为 true,即表示设置的规则无法被覆盖(与css中的!important
类似)
fis.media(mode)
模仿自 css 的 @media
,表示不同的状态。这是 fis3 中的一个重要概念,其意味着有多份配置,每一份配置都可以让 fis3 进行不同的编译。
- mode
string
,设定不同状态- 返回值
fis
对象。即可以链式调用。
fis.plugin(name [, props [, position]])
插件调用接口。
- name
插件名,插件名需要特殊说明一下,fis3 固定了插件扩展点,每一个插件都有个类型,体现在插件发布的 npm 包名字上;比如 fis-parser-less 插件,parser指的是在 parser 扩展点做了个解析 .less 的插件。
fis.match('*.less', {
parser: fis.plugin('less', {}) //属性 parser 表示了插件的类型
})
- props
对象,插件属性
- position
设置插件位置,如果目标文件已经设置了某插件,默认再次设置会覆盖掉。如果希望在已设插件执行之前插入或者之后插入,请传入prepend
或者append
。
配置属性
先看官网吧,没时间写了。点击标题跳转。