FIS plug-in mechanism

FIS plug-in mechanism
author: @TiffanysBear

When we use the FIS widget has never thought he also developed a plug-in-based FIS, FIS involved in the entire process of packing compiled; then the question comes:

The operating principle FIS compilation process what is it?
FIS compilation process of packing what?
How to participate in the FIS packaged compilation process?
How to achieve a FIS-based plug-ins?
FIS is how the introduction of a custom plug-ins?

, And then based on the following questions from the principle slowly analysis, process and understand basic principles of FIS compiled and how a FIS your own custom plug-ins.

Operating principle compilation process

fis compilation process can be divided into two phases: a single file is compiled and packaged. Process is as follows pictures, pictures from the FIS official website:

[Picture upload failed ... (image-e08187-1566795911500)]

Single-file compilation process

As can be seen from the figure, single-file compilation process is carried out by pipe conduit, and initially to establish a cache to improve coding efficiency, the process in a single file, and is divided into the following steps:

parser (compiler): The other languages compiled to standard js, css, such as front-end template, coffee-> script is compiled js, will be less, sass compiled into css.

Preprocessor (standard pre-processor): fis certain modifications prior to normalize, such as support prepared image-set syntax widget

standard (normalized): in front of two processing will be handled as a standard file js, css, html syntax, the standardization process fis core of these three languages, language capability expansion process. This means that, using less, coffee and other grammar as the availability of resources in fis positioning systems, embedded content, the ability to rely on declarations. This process is not scalable.

postprocessor (the standard processors): the file after the standardization process, such as the use of plug-in dependencies statement js wrapper ability to achieve, you can get dependencies js file, and add define packaging.

lint (? Optional) (checker): Code verification stage, using fis release command --lint option calls the procedure.

test (? Optional) (Tester): automatic testing phase, using fis release command --test option calls the procedure.

optimize (? Optional) (optimizer): code optimization phase, using fis release command --optimize option calls the procedure. Built-fis fis-optimizer-uglify-js plugin and fis-optimizer-clean-css plugins are such extensions.

The packaging process

If the merge file is a simple, can be used for simple __inline embedded content, if the content embedded real-time embedded dynamic variables need to be considered and used to compile bdtmpl conversion front end module.

The principle is packaged in FIS pack configuration, the file operations such as merging of resources, on the final output file to map.json package information file, and producing a corresponding package file. FIS and so the packed result will not be embedded in a file, but to use data map.json be run in the packaging information query.

First, the configuration fis-conf.js:

fis.config.merge({
    pack : {
        'aio.js' : ['a.js', 'b.js', 'c.js']
    }
});

Second, execute the command fis release --pack --dest ./output

Third, enter the output directory, view map.json file to obtain content:


{
    "res" : {
        "a.js" : {
            "uri" : "/a.js",
            "type" : "js",
            "pkg" : "p0"
        },
        "b.js" : {
            "uri" : "/b.js",
            "type" : "js",
            "pkg" : "p0"
        },
        "c.js" : {
            "uri" : "/c.js",
            "type" : "js",
            "pkg" : "p0"
        }
    },
    "pkg" : {
        "p0" : {
            "uri" : "/aio.js",
            "type" : "js",
            "has" : ["a.js", "b.js", "c.js"]
        }
    }
}

Fourth, the map.json to a front or rear frame, when run as needed "a.js" when the resources of the information map.json framework should read, and whether it should return based on certain policy decisions " a.js "resource labeled" p0 "uri package.

Therefore, it can be seen, FIS team to emphasize the point, just packaged backup resources.

Fis packaging process system provides four scalable process, which are:

prepackager (packaged pre-processor): resources pretreated prior to packaging.
packager (Packet Manager): The resource pack. The default process is to collect packer resource table, the establishment of map.json
spriter (csssprite Processor): treatment of css for sprites
postpackager (post processor package): After processing a file package, typically used to convert documents into other languages map.json, such php

Plug-call mechanism

fis plug-in is a npm package, use fis.require function to load. When we load a plug-in fis system time, will use require nodejs lookup mechanism upward from fis-kernel module and look up the desired module.

fis clever use of plug-in system nodejs require mechanisms to achieve its extension mechanism. This means that, in order to expand fis There are three ways:

1, using the user's fis, you need some kind of plug-ins can be at the same level fis installation directory, install their own extensions plug-ins. For example: npm install -g fis npm install -g fis-parser-coffee-script
2, FIS using the built-in plug-ins, has a built-in plug-ins include:

fis-kernel: fis compile the kernel mechanism
fis-command-release: provider fis release command, processing the compilation process, and provides file monitoring, automatic upload functions
fis-command-install: provider fis install command for fis warehouse download components, configuration, frame, materials and other resources from
fis-command-server: provider fis server command for opening a local php-cgi server, the project preview, debugging.
fis-optimizer-uglify-js: fis optimization plug-in, call uglify-js js contents of the file compression.
fis-optimizer-clean-css: fis optimization plug-in, call the clean-css css contents of the file compression.
fis-postprocessor-jswrapper: fis post-processor plug-js file for packaging, packaging or support the amd define self-executing anonymous function wrapper.

3, dependent on the development of a npm package fis modules, and custom plug-ins required in this package. In this way and on a similar plug-ins will also be installed in the same directory fis.

Scalable opportunity

Throughout the compilation process can be extended following points, will talk about our own custom plug-ins can be customized to their needs in the following time, to obtain the results compiled by the callback stage, custom configuration.
Compilation stage:

parser
preprocessor
postprocessor
lint
test

Packing stage:

prepackager
packager
spriter
postpackager

Custom plug-in

Custom plug-ins required, a npm package needs to be encapsulated, scalable conjunction with the above timing, generally naming rules: fis- [need to insert timing name] - [custom plug-in name], for example: fis-parse-my-css ;

Compilation phase plug

1, in a custom plug-in index.js:

/*
 * fis
 * http://fis.baidu.com/
 */

'use strict';

var sass = require('node-sass');

module.exports = function(content, file, settings) {
    // content: 内容
    // file: 文件
    // settings: 现在的配置
    var opts = fis.util.clone(settings);
    opts.data = content;
    return sass.renderSync(opts);
};

2, plug-in configuration to call
call format in fis-config.js follows:

// vi fis-conf.js
// 文件后缀 .scss 的调用插件 my-sass 进行解析
fis.config.set('modules.parser.scss', 'my-sass');
fis.config.set('settings.parser.my-sass', {
    // my-sass 的配置
});
fis.config.set('roadmap.ext.scss', 'css'); // 由于 scss 文件最终会编译成 css，设置最终产出文件后缀为 css

3, released npm package, this can refer to a document I wrote before, from 0-1 to release a package npm

Packaging phase plug

1, plug-in interface so:

/**
 * 打包阶段插件接口
 * @param  {Object} ret      一个包含处理后源码的结构
 * @param  {Object} conf     一般不需要关心，自动打包配置文件
 * @param  {Object} settings 插件配置属性
 * @param  {Object} opt      命令行参数
 * @return {undefined}          
 */
module.exports = function (ret, conf, settings, opt) {
    // ret.src 所有的源码，结构是 {'<subpath>': <File 对象>}
    // ret.ids 所有源码列表，结构是 {'<id>': <File 对象>}
    // ret.map 如果是 spriter、postpackager 这时候已经能得到打包结果了，
    // 可以修改静态资源列表或者其他
}

Prepackager to plug an example. Need to do some processing before prepackager file that is packaged, for example, you want to insert compile time at all html inside comment.

2, plug-in development

We named the append-build-time for the plug-in

<npm/global/path>/fis-prepackager-append-build-time
<npm/global/path>/fis-prepackager-append-build-time/index.js

In its index.js in:

module.exports = function(ret, conf, settings, opt) {
    fis.util.map(ret.src, function(subpath, file) {
        if (file.isHtmlLike) {
            var content = file.getContent();
            content += '<!-- build '+ (new Date())+'-->';
            file.setContent(content);
        }
    });
};

3, configured to use

// vi fis-conf.js
fis.config.set('modules.prepackager', 'append-build-time'); // packager阶段插件处理所有文件，所以不需要给某一类后缀的文件设置。
fis.config.set('settings.prepackager.append-build-time', {
    // settings
})

4, released npm package, this can refer to a document I wrote before, released a npm package from 0-1

hint:

Of course, in order to more quickly get some small demand, plug-in function can be written directly in the configuration file fis-conf.js;

// vi fis-conf.js
fis.config.set('modules.postprocessor.js', function (content) {
    return content += '\n// build time: ' + Date.now();
});

NOTE: When using plug-in configuration, with a plurality of plug extension point may be configured, for example;

// 调用 fis-prepackager-a, fis-prepackager-b ...插件
fis.config.set('modules.prepackager', 'a,b,c,d');
// or
fis.config.set('modules.prepackager', ['a', 'b', 'c', 'd']);
// or
fis.config.set('modules.prepackager', [function () {}, function () {}])

Principles and specific packaging steps talked about so much, specific packaging solutions can see FIS official website - packaging solutions

This paper Reference Document:
1, plug-in extension points list http://fex-team.github.io/fis-site/docs/more/extension-point.html
2, plug-call mechanism http: //fex-team.github. IO / FIS-Site / docs / More / How-plugin-works.html
3, the compilation process operating principle http://fex-team.github.io/fis-site/docs/more/fis-base.html