FIS3官方文档学习

FIS3学习

针对公司项目的配置文件学习。
大部分资料从FIS3官方文档整理。

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

FIS3：glob

常用规则

• *匹配0或多个除了/以外的字符
• ?匹配单个除了/以外的字符
• **匹配多个字符包括/
• {}可以让多个规则用,分隔，起到或者的作用
• ! 出现在规则的开头，表示取反。即匹配不命中后面规则的文件

1. 需要注意的是，fis 中的文件路径都是以/ 开头的，所以编写规则时，请尽量严格的以 / 开头。
2. 当设置规则时，没有严格的以/ 开头，比如 a.js, 它匹配的是所有目录下面的 a.js, 包括：/a.js、/a/a.js、/a/b/a.js。 如果要严格只命中根目录下面的 /a.js, 请使用fis.match('/a.js')。
3. 另外/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。

配置属性

先看官网吧，没时间写了。点击标题跳转。

---