fis-pure- 前端模块化解决方案
JavaScript Web框架
共0Star
详细介绍
fis-pure 是基于FIS的纯前端模块化解决方案pure
pure是基于FIS二次封装能力封装而成的解决方案,可以直接使用,也可以参考fis-pure自行封装或组合使用插件来构建属于自己的一体化解决方案。
模块化开发
-
不仅仅是脚本模块化,pure带给你模版、脚本、样式的组件化方案。
-
自动加载模块化依赖,无需手动引入静态资源。
-
与Node.js风格一致的模块化开发体验,告别
define
。
[](https://github.com/fex-team/fis-
pure#%E8%87%AA%E5%8A%A8%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)自动性能优化
pure可以自动压缩、合并页面引用到的所有资源,配置灵活,一个命令完成性能优化,轻松实践雅虎14条优化规则。并且这一切优化无需 任何
后端框架或服务支持。
[](https://github.com/fex-team/fis-
pure#%E5%89%8D%E7%AB%AF%E8%AF%AD%E8%A8%80%E6%94%AF%E6%8C%81)前端语言支持
-
直接编写less文件,无需额外编译工具支持。
-
可以直接在脚本中通过
var template = __inline('path/to/template.tmpl');
引用经过了预编译的underscore模版,无需异步请求和解析。 -
更多的前端语言支持可以参考辅助开发
[](https://github.com/fex-team/fis-
pure#%E6%9C%AC%E5%9C%B0%E8%B0%83%E8%AF%95%E7%8E%AF%E5%A2%83)本地调试环境
-
通过
pure server start
就能开启本地调试服务器。 -
通过
fis release --watch --live
实现监听文件修改,自动刷新页面等功能。更多内容可以参考辅助开发。
[](https://github.com/fex-team/fis-
pure#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8)如何使用
安装
-
安装 nodejs&npm
-
安装pure
npm install fis-pure -g
pure -v
[](https://github.com/fex-team/fis-
pure#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)快速上手
快速上手请参考前端模块化
[](https://github.com/fex-team/fis-
pure#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%8A%A0%E8%BD%BD)模块化加载
如何使用模块化加载可以参考fis-pure-demo,大致需要以下几个步骤
-
在需要模块化资源管理的页面,如index.html中引用Mod,注意Mod需放在lib文件夹内,因为这是模块化加载库,不能被模块化。 示例
-
modules目录下添加页面脚本,如
main.js
,在页面中则可以通过require('main')
加载静态资源。 示例 -
需要引用其他模块,以jquery.js为例,只要在modules目录中添加代码,在main.js中就可以通过
var $ = require('jquery')
加载,在通过pure release
发布后,页面就会自动加载jquery.js与main.js。
[](https://github.com/fex-team/fis-
pure#%E7%9B%AE%E5%BD%95%E8%A7%84%E8%8C%83)目录规范
pure自带了一个非常简单的目录规范
-
所有组件化的脚本、样式、图片均放在modules目录中,可以按照组件划分目录,非模块化的脚本放在lib目录中。
-
page目录下的页面文件会发布到根目录,静态资源会发布到static目录。
任何 目录规范
、部署规范
、编译规范
都是可配置的(配置代码)。
如果希望调整目录规范,建议将配置代码中roadmap.path的部分整体复制到项目的fis-
conf.js中再进行调整,避免配置不符合预期的问题。
内置的规范包括:
modules
目录下的js、css、less文件都是模块化文件,脚本会自动包装define,无需手动添加。使用require.async或者require加载模块的时候id与文件的对应规则是这样的:
文件 | 引用id | 举个例子 |
/modules/main.js | main | var main = require('main'); |
/modules/jquery/jquery.js | jquery | var $ = require('jquery'); |
/modules/jquery/jquery.scroll.js | jquery/jquery.scroll | require('jquery/jquery.scroll'); |
lib
目录下的文件不被认为是模块化的,请直接在页面上使用script或link标签引用。
配置
参考fis配置
[](https://github.com/fex-team/fis-
pure#%E6%9B%B4%E5%A4%9A%E8%B5%84%E6%96%99)更多资料
-
0 Star
-
578 Star
-
0 Star
-
0 Star
-
0 Star
-
0 Star
-
0 Star
-
0 Star
-
882 Star
-
234 Star