常用插件列表

parser 插件

fis-parser-babel-5.x

支持 es6、es7 或者 jsx 编译成 es5

  1. fis.match('*.jsx', {
  2.   parser: fis.plugin('babel-5.x')
  3. })

fis3-parser-typescript

支持 typescript、es6 或者 jsx 编译成 js。速度相比 babel 略快，但是 es7 跟进较慢。

  1. fis.match('*.jsx', {
  2.   parser: fis.plugin('typescript')
  3. })

fis-parser-less-2.x

支持 less 编译成 css

  1. fis.match('*.less', {
  2.   parser: fis.plugin('less-2.x'),
  3.   rExt: '.css'
  4. })

fis-parser-node-sass

支持 sass/scss 编译成 css。

  1. fis.match('*.scss', {
  2.   rExt: '.css',
  3.   parser: fis.plugin('node-sass', {
  4.     // options...
  5.   })
  6. })

fis-parser-jdists

一款强大的代码块预处理工具。比如加上如下配置，在 debug 注释中的代码，在正式环境下自动移除。

  1. fis.media('production').match('*.js', {
  2.   parser: fis.plugin('jdists', {
  3.     remove: "debug"
  4.   })
  5. })
  1. /*<debug>*/
  2. // 这段代码在 fis3 release production 的时候会被移除。
  3. console.log(debug);
  4. /*</debug>*/

preprocessor 插件

fis3-preprocessor-js-require-css

允许你在 js 中直接 require css 文件。

  1. fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  2.   preprocessor: fis.plugin('js-require-css')
  3. })

fis3-preprocessor-js-require-file

允许你在 js 中直接 require 文件。比如图片，json, 其他静态文件。

require 部分将会替换成部署后的 url。 同时还支持，如果文件小于 20K 直接替换成 base64 字符串。

  1. fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  2.   preprocessor: fis.plugin('js-require-file')
  3. })

fis3-preprocessor-autoprefixer

自动给 css 属性添加前缀，让标准的 css3 支持更多的浏览器.

  1. fis.match('*.{css,less,scss}', {
  2.   preprocessor: fis.plugin('autoprefixer', {
  3.     "browsers": ["Android >= 2.1", "iOS >= 4", "ie >= 8", "firefox >= 15"],
  4.     "cascade": true
  5.   })
  6. })

postprocessor 插件

待补充

optimizer 插件

fis-optimizer-uglify-js

压缩 js 代码。

  1. fis.match('*.{js,jsx,ts,tsx,es6,es}', {
  2.   optimizer: fis.plugin('uglify-js')
  3. });

fis-optimizer-clean-css

压缩 css 代码。

  1. fis.match('*.{scss,sass,less,css}', {
  2.   optimizer: fis.plugin('clean-css',{
  3.       //option
  4.   })
  5. })

fis-optimizer-png-compressor

压缩 png 图片。

  1. fis.match('*.png', {
  2.   optimizer: fis.plugin('png-compressor',{
  3.       //option
  4.   })
  5. })

fis-optimizer-smarty-xss

smarty xss 修复插件。 fis3-smarty 中已默认配置好。

  1. fis.match('*.tpl', {
  2.   optimizer: fis.plugin('smarty-xss')
  3. })

fis-optimizer-html-compress

smarty html 代码压缩插件。 fis3-smarty 中已默认配置好。

  1. fis.match('*.tpl', {
  2.   optimizer: fis.plugin('html-compress')
  3. })

jello-optimizer-velocity-xss

velocity 模板 xss 修复插件。

  1. fis.match('*.vm', {
  2.   optimizer: fis.plugin('velocity-xss')
  3. })

package 插件

fis3-packager-map

在 fis3 中自带了， 默认的打包插件。详情见插件 Readme

fis3-packager-deps-pack

支持包含依赖的打包插件

  1. fis.match('::packager', {
  2.   packager: fis.plugin('deps-pack', {
  4.     'pkg/hello.js': [
  6.       // 将 main.js 加入队列
  7.       '/static/hello/src/main.js',
  9.       // main.js 的所有同步依赖加入队列
  10.       '/static/hello/src/main.js:deps',
  12.       // 将 main.js 所以异步依赖加入队列
  13.       '/static/hello/src/main.js:asyncs',
  15.       // 移除 comp.js 所有同步依赖
  16.       '!/static/hello/src/comp.js:deps'
  17.     ],
  19.     // 也可以从将 js 依赖中 css 命中。
  20.     'pkg/hello.css': [
  21.       // main.js 的所有同步依赖加入队列
  22.       '/static/hello/src/main.js:deps',
  23.     ]
  24.   })
  25. });

fis3-postpackager-loader

静态资源前端加载器，纯前端项目必备插件。自动加载页面中用到的资源，同时还能按页面级别的All In One 打包。

  1. fis.match('::packager', {
  2.   postpackager: fis.plugin('loader')
  3. });

deploy 插件

fis3-deploy-local-deliver

已自带 fis3 中。用来将文件产出到本地。

  1. fis.match('*.js', {
  2.     deploy: fis.plugin('local-deliver', {
  3.         to: './output'
  4.     })
  5. })

fis3-deploy-http-push

将产出文件通过 http post 到目标机器。

  1. fis.match('*.js', {
  2.     deploy: fis.plugin('http-push', {
  3.         //如果配置了receiver，fis会把文件逐个post到接收端上
  4.         receiver: 'http://www.example.com:8080/receiver.php',
  5.         //这个参数会跟随post请求一起发送
  6.         to: '/home/fis/www'
  7.     })
  8. })

fis3-deploy-tar

将产出文件，打包成 tar 文件。

  1. fis.match('**', {
  2.   deploy: [
  3.     fis.plugin('tar'),
  5.     fis.plugin('local-deliver', {
  6.       to: './output'
  7.     })
  8.   ]
  9. })

fis3-deploy-zip

将产出文件，打包成 zip 文件。

  1. fis.match('**', {
  2.   deploy: [
  3.     fis.plugin('zip'),
  5.     fis.plugin('local-deliver', {
  6.       to: './output'
  7.     })
  8.   ]
  9. })

fis3-deploy-encoding

将产出的文件做编码处理。

  1. fis.match('**', {
  2.     charset: 'gbk',
  3.     deploy: [
  4.         fis.plugin('encoding'),
  5.         fis.plugin('local-deliver')
  6.     ]
  7. });

fis3-deploy-replace

将产出的文件，做文本替换。

  1. fis.match('**', {
  2.     deploy: [
  3.         fis.plugin('replace', {
  4.             from: /(img|cdn)\.baidu\.com/,
  5.             to: function ($0, $1) {
  6.                 switch ($1) {
  7.                     case 'img':
  8.                         return '127.0.0.1:8080';
  9.                     case 'cdn':
  10.                         return '127.0.0.1:8081';
  11.                 }
  12.                 return $0;
  13.             }
  14.         }),
  15.         fis.plugin('local-deliver')
  16.     ]
  17. });

fis3-deploy-skip-packed

将产出的文件过滤掉已被打包的。

  1. fis.match('**', {
  2.   deploy: [
  3.     fis.plugin('skip-packed', {
  4.       // 配置项
  5.     }),
  7.     fis.plugin('local-deliver', {
  8.       to: 'output'
  9.     })
  10.   ]
  11. })

hook 插件

fis3-hook-commonjs

[强烈推荐] CommonJs 模块化支持插件。 详情请见 README

  1. fis.hook('commonjs')

fis3-hook-amd

AMD 模块化支持插件。

fis3-hook-cmd

CMD 模块化支持插件。

fis3-hook-system

System 模块化支持插件。

fis3-hook-node_modules

支持 npm 组件的插件，npm 包中的模块，直接通过包名就能 require 到。

  1. fis.hook('node_modules');

fis3-hook-relative

支持产出为相对路径。