Skip to content

Latest commit

 

History

History
378 lines (268 loc) · 8.13 KB

common-plugin.md

File metadata and controls

378 lines (268 loc) · 8.13 KB

常用插件列表

parser 插件

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

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

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

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

支持 less 编译成 css

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

支持 sass/scss 编译成 css。

fis.match('*.scss', {
  rExt: '.css',
  parser: fis.plugin('node-sass', {
    // options...
  })
})

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

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

preprocessor 插件

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

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

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

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

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

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

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

postprocessor 插件

待补充

optimizer 插件

压缩 js 代码。

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

压缩 css 代码。

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

压缩 png 图片。

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

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

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

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

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

velocity 模板 xss 修复插件。

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

package 插件

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

支持包含依赖的打包插件

fis.match('::packager', {
  packager: fis.plugin('deps-pack', {

    'pkg/hello.js': [

      // 将 main.js 加入队列
      '/static/hello/src/main.js',

      // main.js 的所有同步依赖加入队列
      '/static/hello/src/main.js:deps',

      // 将 main.js 所以异步依赖加入队列
      '/static/hello/src/main.js:asyncs',

      // 移除 comp.js 所有同步依赖
      '!/static/hello/src/comp.js:deps'
    ],

    // 也可以从将 js 依赖中 css 命中。
    'pkg/hello.css': [
      // main.js 的所有同步依赖加入队列
      '/static/hello/src/main.js:deps',
    ]
  })
});

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

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

deploy 插件

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

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

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

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

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

fis.match('**', {
  deploy: [
    fis.plugin('tar'),

    fis.plugin('local-deliver', {
      to: './output'
    })
  ]
})

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

fis.match('**', {
  deploy: [
    fis.plugin('zip'),

    fis.plugin('local-deliver', {
      to: './output'
    })
  ]
})

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

fis.match('**', {
    charset: 'gbk',
    deploy: [
        fis.plugin('encoding'),
        fis.plugin('local-deliver')
    ]
});

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

fis.match('**', {
    deploy: [
        fis.plugin('replace', {
            from: /(img|cdn)\.baidu\.com/,
            to: function ($0, $1) {
                switch ($1) {
                    case 'img':
                        return '127.0.0.1:8080';
                    case 'cdn':
                        return '127.0.0.1:8081';
                }
                return $0;
            }
        }),
        fis.plugin('local-deliver')
    ]
});

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

fis.match('**', {
  deploy: [
    fis.plugin('skip-packed', {
      // 配置项
    }),

    fis.plugin('local-deliver', {
      to: 'output'
    })
  ]
})

hook 插件

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

fis.hook('commonjs')

AMD 模块化支持插件。

CMD 模块化支持插件。

System 模块化支持插件。

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

fis.hook('node_modules');

支持产出为相对路径。