├── .gitignore ├── .npmignore ├── README.md ├── bin └── pure ├── package.json └── pure.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .DS_Store 3 | /.idea 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.idea 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | fis-pure 2 | ==== 3 | 4 | 基于FIS的纯前端模块化解决方案pure。 5 | 6 | **建议刚接触这个方案的同学直接使用 [FIS3](https://github.com/fex-team/fis3) 而非 pure，FIS3可以更轻松的实现 pure 的功能。** 7 | 8 | pure是基于FIS二次封装能力封装而成的解决方案，可以直接使用，也可以参考fis-pure自行封装或组合使用插件来构建属于自己的一体化解决方案。 9 | 10 | > 因为很重要，所以写在最前面 11 | 12 | 如果希望在pure的基础上添加自己的目录规范，即修改 `roadmap.path` 时，**不可以** 使用fis.config.merge或者fis.config.set，而必须按照下面的方式进行配置 13 | 14 | ```javascript 15 | fis.config.get('roadmap.path').unshift({ 16 | reg: 'map.json', 17 | release: false 18 | }); 19 | ``` 20 | 21 | roadmap的配置具体可以参考 [roadmap详解](http://fis.baidu.com/docs/advance/roadmap.html) 22 | 23 | ## 目录 24 | * [模块化开发](#模块化开发) 25 | * [组件生态](#组件生态) 26 | * [自动性能优化](#自动性能优化) 27 | * [前端语言支持](#前端语言支持) 28 | * [简化环境安装](#简化环境安装) 29 | * [如何使用](#如何使用) 30 | * [安装](#安装) 31 | * [快速上手](#快速上手) 32 | * [模块化加载](#模块化加载) 33 | * [目录规范](#目录规范) 34 | * [配置](#配置) 35 | * [更多资料](#更多资料) 36 | 37 | 38 | ## 模块化开发 39 | 40 | * 不仅仅是脚本模块化，pure带给你模版、脚本、样式的组件化方案。 41 | * 自动加载模块化依赖，无需手动引入静态资源。 42 | * 与Node.js风格一致的模块化开发体验，告别 ```define```。 43 | 44 | ## 组件生态 45 | 46 | 使用 `pure install` 命令可以下载[fis-components](https://github.com/fis-components)组件，在业务代码中可以直接通过 `require` 使用。 47 | 48 | ```bash 49 | pure install zepto 50 | ``` 51 | 52 | ```javascript 53 | var $ = require('zepto'); 54 | ``` 55 | 56 | ## 自动性能优化 57 | 58 | pure可以自动压缩、合并页面引用到的所有资源，配置灵活，一个命令完成性能优化，轻松实践雅虎14条优化规则。并且这一切优化无需**任何**后端框架或服务支持。 59 | 60 | ## 前端语言支持 61 | 62 | * 直接编写less文件，无需额外编译工具支持。 63 | * 可以直接在脚本中通过 ```var template = __inline('path/to/template.tmpl'); ``` 引用经过了预编译的underscore模版，无需异步请求和解析。 64 | * 更多的前端语言支持可以参考[辅助开发](http://fis.baidu.com/docs/beginning/assist.html) 65 | 66 | ## 本地调试环境 67 | 68 | * 通过 `pure server start` 就能开启本地调试服务器。 69 | * 通过 `pure release --watch --live` 实现监听文件修改，自动刷新页面等功能。更多内容可以参考[辅助开发](http://fis.baidu.com/docs/beginning/assist.html)。 70 | 71 | ## 如何使用 72 | 73 | ### 安装 74 | * 安装 [nodejs&npm](http://nodejs.org/) 75 | * 安装pure 76 | 77 | ```bash 78 | npm install fis-pure -g 79 | pure -v 80 | ``` 81 | 82 | ### 快速上手 83 | 84 | 快速上手请参考[前端模块化](http://fis.baidu.com/docs/advance/modjs-solution.html) 85 | 86 | 开发angular应用还可以参考[pure-angular-demo](https://github.com/hefangshi/pure-angular-demo) 87 | 88 | ### 模块化加载 89 | 90 | 如何使用模块化加载可以参考[fis-pure-demo](https://github.com/hefangshi/fis-pure-demo)，大致需要以下几个步骤 91 | 92 | * 在需要模块化资源管理的页面，如index.html中引用[Mod](https://github.com/fex-team/mod)，注意[Mod](https://github.com/fex-team/mod)需放在lib文件夹内，因为这是模块化加载库，不能被模块化。 [示例](https://github.com/hefangshi/fis-pure-demo/blob/master/index.html#L7) 93 | * modules目录下添加页面脚本，如`main.js`，在页面中则可以通过`require('main')`加载静态资源。 [示例](https://github.com/hefangshi/fis-pure-demo/blob/master/index.html#L31-L33) 94 | * 需要引用其他模块，以jquery.js为例，只要在modules目录中添加代码，在main.js中就可以通过`var $ = require('jquery')`加载，在通过`pure release`发布后，页面就会自动加载jquery.js与main.js。 95 | 96 | #### 使用变量来异步加载模块化代码 97 | 98 | 我们经常会遇到有些应用场景需要通过运行时的变量来决定异步加载哪些模块，由于 pure 的依赖分析均在编译期完成，无法知道变量可能的值有哪些。因此为了实现这个目标，需要手动在使用变量加载异步变量的脚本中添加一些异步依赖的注释。 99 | 100 | ```javascript 101 | /** 102 | * @require.async page/detail 103 | */ 104 | ``` 105 | 106 | ### 目录规范 107 | 108 | pure自带了一个非常简单的目录规范 109 | 110 | * 所有组件化的脚本、样式、图片均放在modules目录中，可以按照组件划分目录，非模块化的脚本放在lib目录中。 111 | * page目录下的页面文件会发布到根目录，静态资源会发布到static目录。 112 | * pure install获得的组件保存在components目录 113 | 114 | 任何 ``目录规范``、``部署规范``、``编译规范`` 都是可配置的（[配置代码](https://github.com/fex-team/fis-pure/blob/master/pure.js#L27-L74)）。 115 | 116 | > 如果希望调整目录规范，建议将[配置代码](https://github.com/fex-team/fis-pure/blob/master/pure.js#L27-L74)中roadmap.path的部分整体复制到项目的fis-conf.js中再进行调整，避免配置不符合预期的问题。 117 | 118 | 内置的规范包括： 119 | 120 | 1. ``modules`` 目录下的js、css、less文件都是模块化文件，脚本会自动包装define，无需手动添加。使用require.async或者require加载模块的时候id与文件的对应规则是这样的： 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 |
文件引用id举个例子
/modules/main.jsmainvar main = require('main');
/modules/jquery/jquery.jsjqueryvar $ = require('jquery');
/modules/jquery/jquery.scroll.jsjquery/jquery.scrollrequire('jquery/jquery.scroll');
143 | 144 | 1. ``lib`` 目录下的文件不被认为是模块化的，请直接在页面上使用script或link标签引用。 145 | 146 | ### 配置 147 | 148 | 参考[fis配置](http://fis.baidu.com/docs/api/fis-conf.html) 149 | 150 | ## 更多资料 151 | 152 | * [fis](https://github.com/fex-team/fis) 153 | * [fis-plus](https://github.com/fex-team/fis-plus) 154 | * [gois](https://github.com/xiangshouding/gois) 155 | * [spmx](https://github.com/fouber/spmx/) 156 | * [phiz](https://github.com/fouber/phiz/) 157 | -------------------------------------------------------------------------------- /bin/pure: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | require('../pure.js').cli.run( process.argv ); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fis-pure", 3 | "version": "0.1.4", 4 | "description": "A pure front end module solution with modjs.", 5 | "main": "pure.js", 6 | "bin": { 7 | "pure": "bin/pure", 8 | "fis-pure": "bin/pure" 9 | }, 10 | "scripts": { 11 | "uninstall": "node bin/pure server stop", 12 | "test": "echo \"Error: no test specified\" && exit 1" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/fex-team/fis-pure.git" 17 | }, 18 | "keywords": [ 19 | "fis" 20 | ], 21 | "author": "fis", 22 | "license": "BSD", 23 | "dependencies": { 24 | "fis": "1.9.17", 25 | "fis-parser-utc": "0.0.2", 26 | "fis-parser-less": "0.1.0", 27 | "fis-postprocessor-require-async": "0.0.9", 28 | "fis-postpackager-autoload": "0.0.x", 29 | "fis-postpackager-simple": "0.0.x", 30 | "fis-lint-jshint": "0.0.4" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /pure.js: -------------------------------------------------------------------------------- 1 | var fis = module.exports = require('fis'); 2 | 3 | fis.cli.name = 'fis-pure'; 4 | fis.cli.info = fis.util.readJSON(__dirname + '/package.json'); 5 | 6 | fis.config.merge({ 7 | statics: '/static', 8 | modules: { 9 | parser: { 10 | less: 'less', 11 | tmpl: 'utc' 12 | }, 13 | postprocessor: { 14 | js: "jswrapper, require-async", 15 | html: "require-async" 16 | }, 17 | postpackager: ['autoload', 'simple'], 18 | lint: { 19 | js: 'jshint' 20 | } 21 | }, 22 | roadmap: { 23 | ext: { 24 | less: 'css' 25 | }, 26 | path: [{ 27 | reg: /^\/components\/.*\.js$/i, 28 | isMod: true 29 | }, { 30 | reg: /^\/page\/(.*)$/i, 31 | useCache: false, 32 | release: '$1' 33 | }, { 34 | //一级同名组件，可以引用短路径，比如modules/jquery/juqery.js 35 | //直接引用为var $ = require('jquery'); 36 | reg: /^\/modules\/([^\/]+)\/\1\.(js)$/i, 37 | //是组件化的，会被jswrapper包装 38 | isMod: true, 39 | //id为文件夹名 40 | id: '$1', 41 | release: '${statics}/$&' 42 | }, { 43 | //modules目录下的其他脚本文件 44 | reg: /^\/modules\/(.*)\.(js)$/i, 45 | //是组件化的，会被jswrapper包装 46 | isMod: true, 47 | //id是去掉modules和.js后缀中间的部分 48 | id: '$1', 49 | release: '${statics}/$&' 50 | }, { 51 | //less的mixin文件无需发布 52 | reg: /^(.*)mixin\.less$/i, 53 | release: false 54 | }, { 55 | //其他css文件 56 | reg: /^(.*)\.(css|less)$/i, 57 | release: '${statics}/$&' 58 | }, { 59 | //前端模板 60 | reg: '**.tmpl', 61 | //当做类js文件处理，可以识别__inline, __uri等资源定位标识 62 | isJsLike: true, 63 | //只是内嵌，不用发布 64 | release: false 65 | }, { 66 | reg: /.*\.(html|jsp|tpl|vm|htm|asp|aspx|php)$/, 67 | useCache: false, 68 | release: '$&' 69 | }, { 70 | reg: "README.md", 71 | release: false 72 | }, { 73 | reg: "**", 74 | release: '${statics}/$&' 75 | }] 76 | }, 77 | settings: { 78 | postprocessor: { 79 | jswrapper: { 80 | type: 'amd' 81 | } 82 | }, 83 | lint: { 84 | jshint: { 85 | camelcase: true, 86 | curly: true, 87 | eqeqeq: true, 88 | forin: true, 89 | immed: true, 90 | latedef: true, 91 | newcap: true, 92 | noarg: true, 93 | noempty: true, 94 | node: true 95 | } 96 | } 97 | } 98 | }); --------------------------------------------------------------------------------