如何编写fis3插件

目前业务正在逐步迁移到fis3和lego,有许多和业务相关的fis插件需要处理。

fis 编译流程

官方的这张图,对fis的构建流程讲述的很清楚了,主要包括单文件编译和打包,业务中的插件也主要是这两种,至于是pre还是post,差别不是特别大。主要记住一点区别:单文件编译阶段,无法获取文件之间的关联信息;打包阶段,能够拿到项目的所有文件

iconfont 实例

本文以fis接入iconfont插件为例,讲述iconfont接入方案,iconfont大致的流程:

  1. 同步svg,将项目用到的svg,通过iconfont平台同步到项目目录
  2. 编译svg,生成字体文件
  3. 接入字体相关的css问题
  4. html引入css文件

单文件编译处理iconfont

大体的逻辑是:

  1. 遍历项目目录下的所有svg,生成字体文件
  2. 生成css
  3. 所有业务html引入css

配置:

fis.match('/*.html', {
    preprocessor: fis.plugin('iconfont',  {
        svgPath: '../svgs',
        output: 'modules/common/fonts'
    })
})

对根目录下的所有html应用组件,编译一次svg,生成字体文件,然后对业务html引入css文件。

打包阶段处理iconfont

上面的处理方式很粗暴,svg并没有按需生成,更好的方式是:

  1. 获取项目中用到的icon
  2. 查找对应的svg,生成字体文件
  3. 字体css生成
  4. html引入css 其中,第1步,需要通过编译所有文件获取结果,所以必须要在打包截断处理。参考这里

单元测试

fis3一个很大的优势是提供了单元测试的接口,写完插件后,记得要用单元测试过下,同时这也是一个调试的过程(fis2的调试只能依赖具体的项目),主体的代码架构是:

var fs = require('fs'),
    path = require('path'),
    fis = require('fis3'),
    _ = fis.util,
    expect = require('chai').expect,
   // 下面这两个库是提供测试的关键库,用于release
    _release = fis.require('command-release/lib/release.js'),
    _deploy = fis.require('command-release/lib/deploy.js'),
   // 自己编写的插件入口文件
    iconfont = require('../src/');

function release(opts, cb) {
    opts = opts || {};
    _release(opts, function(error, info) {
        _deploy(info, cb);
    });
}
describe('fis-postpackager-iconfont', function() {
    var root = path.join(__dirname, 'src');

    fis.project.setProjectRoot(root);
    // 测试用例

    beforeEach(function() {
          // 这里写各种fis的配置
           fis .match('*', {
                deploy: iconfont({
                         // 自己插件的配置
                })
            });
    });

    it('test case', function() {

        release({
            unique: true
        }, function() {
            // 文件是否生成
            // release 之后,检测是否和预期一致
            console.log('release end');
        });
    });
});

npm publish

这个没啥好说的,注册帐号之后,直接在插件目录下 npm init ,按照格式填写package.json后,直接运行 npm publish,将代码发布出去,这样方便其他人使用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏惨绿少年

练习题四

第1章 练习题 1.1 每天晚上 12 点,打包站点目录/var/www/html 备份到/data 目录下(最好每次备份按时间生成不同的备份包) 1.1.1 ...

2060
来自专栏高爽的专栏

如何实现"设为首页","加入收藏"的功能

如何实现"设为首页","加入收藏"的功能   解决思路:          将指定URL设为首页的功能主要是依靠IE默认行为homePage的setHomePa...

2090
来自专栏高爽的专栏

IE下用JavaScript将HTML导出为Word、Pdf

       最近升级公司内部系统发文章的功能,涉及到将文章内容导出为html、word、pdf,系统多用于IE环境下,并且公司电脑都预装了office,所以导...

2210
来自专栏西安-晁州

nodejs中引入art-template模板

使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便。没关系,这里我们...

2600
来自专栏CodingBlock

Postman用法简介-Http请求模拟工具

  在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,拿到接口后肯定都得提前测试一下,这样的话就非常需要有一个比较给力的Http请求模拟工具,...

2387
来自专栏企鹅号快讯

React 学习笔记

React 学习笔记 Wednesday, 03. January 2018 04:45PM react 基于nodejs环境。 ? 一、环境安装 nodejs...

1647
来自专栏王小雷

Oracle Data Integrator 12c 安装(ODI安装)

Oracle Data Integrator 12c 安装(ODI安装) 企业版安装步骤(包含独立安装步骤) 官网下载Oracle Data Inte...

23610
来自专栏IT可乐

Linux 安装mysql

使用 yum 安装源码包(必须有网络) 1、输入如下安装命令,安装过程中输入 y yum install mysql-server -y 2、查看mysql 服...

2436
来自专栏腾讯IVWEB团队的专栏

Node.js 编写 CLI 的实践

通常而言,Node.js 的应用场景有前后端分离、海量web页面渲染服务、命令行工具和桌面端应用等等。本篇文章选取 CLI(Command Line Tools...

2340
来自专栏西安-晁州

使用bee自动生成api文档

beego中的bee工具可以方便的自动生成api文档,基于数据库字段,自动生成golang版基于beego的crud代码,方法如下: 1、进入到gopath目录...

3260

扫码关注云+社区