From 8043f672f7175ccd316ccaf8c845c27501421359 Mon Sep 17 00:00:00 2001 From: 2betop Date: Mon, 6 Jun 2016 19:12:30 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=E8=A1=A5=E5=85=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/docs/INDEX.md | 1 + doc/docs/beginning/install.md | 4 +- doc/docs/common-plugin.md | 334 ++++++++++++++++++++++++++++++++++ 3 files changed, 337 insertions(+), 2 deletions(-) create mode 100644 doc/docs/common-plugin.md diff --git a/doc/docs/INDEX.md b/doc/docs/INDEX.md index 9ba9c9020..3edab4f67 100644 --- a/doc/docs/INDEX.md +++ b/doc/docs/INDEX.md @@ -56,3 +56,4 @@ - [自定义插件](./api/dev-plugin.md) - [mock 假数据模拟](./node-mock.md) - [FIS2 到 FIS3](./fis2-to-fis3.md) +- [常见的插件列表](./common-plugin.md) diff --git a/doc/docs/beginning/install.md b/doc/docs/beginning/install.md index 443d7e1f4..0c396742c 100644 --- a/doc/docs/beginning/install.md +++ b/doc/docs/beginning/install.md @@ -6,7 +6,7 @@ 详细过程参考官网 https://nodejs.org -> Node **版本要求** 0.8.x，0.10.x, 0.12.x，4.x，不在此列表中的版本不予支持。最新版本 node 支持会第一时间跟进，支持后更新支持列表。 +> Node **版本要求** 0.8.x，0.10.x, 0.12.x，4.x，6.x，不在此列表中的版本不予支持。最新版本 node 支持会第一时间跟进，支持后更新支持列表。 - Ubuntu 用户使用 `apt-get` 安装 node 后，安装的程序名叫 `nodejs`，需要软链成 `node` - Windows 用户安装完成后需要在 CMD 下确认是否能执行 node 和 npm @@ -22,7 +22,7 @@ npm install -g fis3 - 如果已经安装了 [FIS](https://github.com/fex-team/fis)，也执行上面的命令进行安装，FIS3 和 FIS 是不同的构建工具，向下无法完全兼容。如果要从 FIS 迁移到 FIS3，请参考文档 [FIS 升级 FIS3](../fis2-to-fis3.md) - 如果 npm 长时间运行无响应，推荐使用 [cnpm](http://npm.taobao.org/) 来安装 -安装完成后执行 `fis3 -v` 判断是否安装成功，如果安装成功，则显示如下信息： +安装完成后执行 `fis3 -v` 判断是否安装成功，如果安装成功，则显示类似如下信息： ``` $ fis3 -v diff --git a/doc/docs/common-plugin.md b/doc/docs/common-plugin.md new file mode 100644 index 000000000..7b8776b80 --- /dev/null +++ b/doc/docs/common-plugin.md @@ -0,0 +1,334 @@ +## 常见插件列表 + + +### parser 插件 + +#### [fis-parser-babel-5.x](https://github.com/fex-team/fis-parser-babel-5.x) + +支持 es6、es7 或者 jsx 编译成 es5 + +```js +fis.match('*.jsx', { + parser: fis.plugin('babel-5.x') +}) +``` + +#### [fis3-parser-typescript](https://github.com/fex-team/fis3-parser-typescript) + +支持 typescript、es6 或者 jsx 编译成 js。速度相比 babel 略快，但是 es7 跟进较慢。 + +```js +fis.match('*.jsx', { + parser: fis.plugin('typescript') +}) +``` + +#### [fis-parser-less-2.x](https://github.com/fouber/fis-parser-less-2.x) + +支持 less 编译成 css + +```js +fis.match('*.less', { + parser: fis.plugin('less-2.x'), + rExt: '.css' +}) +``` + +#### [fis-parser-node-sass](https://github.com/fex-team/fis-parser-node-sass) + +支持 sass/scss 编译成 css。 + +```js +fis.match('*.scss', { + rExt: '.css', + parser: fis.plugin('node-sass', { + // options... + }) +}) +``` + +#### [fis-parser-jdists](https://github.com/fex-team/fis-parser-jdists) + +一款强大的代码块预处理工具。比如加上如下配置，在 `debug` 注释中的代码，在正式环境下自动移除。 + +```js +fis.media('production').match('*.js', { + parser: fis.plugin('jdists', { + remove: "debug" + }) +}) +``` + +```js +/**/ +// 这段代码在 fis3 release production 的时候会被移除。 +console.log(debug); +/**/ +``` + +### preprocessor 插件 + + +#### [fis3-preprocessor-js-require-css](https://github.com/fex-team/fis3-preprocessor-js-require-css) + +允许你在 js 中直接 `require` css 文件。 + +```js +fis.match('*.{js,es,es6,jsx,ts,tsx}', { + preprocessor: fis.plugin('js-require-css') +}) +``` + +#### [fis3-preprocessor-js-require-file](https://github.com/fex-team/fis3-preprocessor-js-require-file) + +允许你在 js 中直接 `require` 文件。比如图片，json, 其他静态文件。 + +require 部分将会替换成部署后的 url。 同时还支持，如果文件小于 20K 直接替换成 base64 字符串。 + +```js +fis.match('*.{js,es,es6,jsx,ts,tsx}', { + preprocessor: fis.plugin('js-require-file') +}) +``` + +### postprocessor 插件 + +待补充 + +### optimizer 插件 + +#### [fis-optimizer-uglify-js](https://github.com/fex-team/fis-optimizer-uglify-js) + +压缩 js 代码。 + +``` +fis.match('*.{js,jsx,ts,tsx,es6,es}', { + optimizer: fis.plugin('uglify-js') +}); +``` + +#### [fis-optimizer-clean-css](https://github.com/fex-team/fis-optimizer-clean-css) + +压缩 css 代码。 + +``` +fis.match('*.{scss,sass,less,css}', { + optimizer: fis.plugin('clean-css',{ + //option + }) +}) +``` + +#### [fis-optimizer-png-compressor](https://github.com/fex-team/fis-optimizer-png-compressor) + +压缩 png 图片。 + +```js +fis.match('*.png', { + optimizer: fis.plugin('png-compressor',{ + //option + }) +}) +``` + +#### [fis-optimizer-smarty-xss](https://github.com/fex-team/fis-optimizer-smarty-xss) + +smarty xss 修复插件。 [fis3-smarty](https://github.com/fex-team/fis3-smarty) 中已默认配置好。 + +``` +fis.match('*.tpl', { + optimizer: fis.plugin('smarty-xss') +}) +``` + + +#### [fis-optimizer-html-compress](https://github.com/pianist829/fis-optimizer-html-compress) + +smarty html 代码压缩插件。 [fis3-smarty](https://github.com/fex-team/fis3-smarty) 中已默认配置好。 + +``` +fis.match('*.tpl', { + optimizer: fis.plugin('html-compress') +}) +``` + +#### [jello-optimizer-velocity-xss](https://github.com/fex-team/jello-optimizer-velocity-xss) + +velocity 模板 xss 修复插件。 + +``` +fis.match('*.vm', { + optimizer: fis.plugin('velocity-xss') +}) +``` + + +### package 插件 + +#### [fis3-packager-map](https://github.com/fex-team/fis3-packager-map) + +在 fis3 中自带了， 默认的打包插件。详情见插件 [Readme](https://github.com/fex-team/fis3-packager-map) + +#### [fis3-packager-deps-pack](https://github.com/fex-team/fis3-packager-deps-pack) + +支持包含依赖的打包插件 + +```js +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', + ] + }) +}); +``` + +#### [fis3-postpackager-loader](https://github.com/fex-team/fis3-postpackager-loader) + +静态资源前端加载器，纯前端项目必备插件。自动加载页面中用到的资源，同时还能按页面级别的All In One 打包。 + +``` +fis.match('::packager', { + postpackager: fis.plugin('loader') +}); +``` + + +### deploy 插件 + +#### [fis3-deploy-local-deliver](https://github.com/fex-team/fis3-deploy-local-deliver) + +已自带 fis3 中。用来将文件产出到本地。 + +```js +fis.match('*.js', { + deploy: fis.plugin('local-deliver', { + to: './output' + }) +}) +``` + +#### [fis3-deploy-http-push](https://github.com/fex-team/fis3-deploy-http-push) + +将产出文件通过 http post 到目标机器。 + +```js +fis.match('*.js', { + deploy: fis.plugin('http-push', { + //如果配置了receiver，fis会把文件逐个post到接收端上 + receiver: 'http://www.example.com:8080/receiver.php', + //这个参数会跟随post请求一起发送 + to: '/home/fis/www' + }) +}) +``` + +#### [fis3-deploy-tar](https://github.com/fex-team/fis3-deploy-tar) + +将产出文件，打包成 tar 文件。 + +``` +fis.match('**', { + deploy: [ + fis.plugin('tar'), + + fis.plugin('local-deliver', { + to: './output' + }) + ] +}) +``` + +#### [fis3-deploy-zip](https://github.com/fex-team/fis3-deploy-zip) + +将产出文件，打包成 zip 文件。 + +``` +fis.match('**', { + deploy: [ + fis.plugin('zip'), + + fis.plugin('local-deliver', { + to: './output' + }) + ] +}) +``` + +#### [fis3-deploy-encoding](https://github.com/fex-team/fis3-deploy-encoding) + +将产出的文件做编码处理。 + +``` +fis.match('**', { + charset: 'gbk', + deploy: [ + fis.plugin('encoding'), + fis.plugin('local-deliver') + ] +}); +``` + +#### [fis3-deploy-replace](https://github.com/fex-team/fis3-deploy-replace) + +将产出的文件，做文本替换。 + +``` +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') + ] +}); +``` + +#### [fis3-deploy-skip-packed](https://github.com/fex-team/fis3-deploy-skip-packed) + +将产出的文件过滤掉已被打包的。 + +``` +fis.match('**', { + deploy: [ + fis.plugin('skip-packed', { + // 配置项 + }), + + fis.plugin('local-deliver', { + to: 'output' + }) + ] +}) +``` + +### hook 插件 + +待补充