FIS 开源项目使用教程

1. 项目的目录结构及介绍

FIS（FIS - Fast Isomorphic Solution）是一个前端工程化工具，旨在提供一套完整的前端开发解决方案。项目的目录结构如下：

fis/
├── bin/
├── docs/
├── example/
├── lib/
├── node_modules/
├── plugin/
├── test/
├── tools/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
└── fis-conf.js

• bin/：包含可执行文件。
• docs/：项目文档。
• example/：示例代码。
• lib/：核心库文件。
• node_modules/：依赖模块。
• plugin/：插件目录。
• test/：测试文件。
• tools/：工具脚本。
• CHANGELOG.md：更新日志。
• CONTRIBUTING.md：贡献指南。
• LICENSE：许可证。
• README.md：项目介绍。
• package.json：项目配置文件。
• fis-conf.js：FIS 配置文件。

2. 项目的启动文件介绍

FIS 项目的启动文件主要是 fis-conf.js，这是一个配置文件，用于配置 FIS 的构建和部署行为。以下是一个基本的 fis-conf.js 示例：

fis.match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
  optimizer: fis.plugin('png-compressor')
});

这个配置文件定义了如何处理不同类型的文件，例如使用 uglify-js 压缩 JavaScript 文件，使用 clean-css 压缩 CSS 文件，以及使用 png-compressor 压缩 PNG 图片。

3. 项目的配置文件介绍

FIS 的配置文件 fis-conf.js 是项目的核心配置文件，它定义了项目的构建规则和部署策略。以下是一些常见的配置选项：

• fis.match(selector, props)：匹配文件并应用配置。
• fis.plugin(name, options)：加载插件并应用选项。
• fis.media(mode)：定义不同的构建模式。

例如，以下配置定义了开发和生产两种模式：

fis.media('dev')
  .match('*', {
    useHash: false,
    optimizer: null
  });

fis.media('prod')
  .match('*', {
    useHash: true,
    optimizer: fis.plugin('uglify-js')
  });

在开发模式下，文件不使用哈希并且不进行优化；在生产模式下，文件使用哈希并且进行压缩优化。

通过这些配置，可以灵活地控制项目的构建和部署过程，以满足不同的开发和生产需求。