hefangshi / modjs-autoload-demo

使用FIS打造纯前端模块化解决方案

modjs-autoload-demo

modjs-autoload-demo基于modjs-todo-demo 调整而来，与modjs-todo-demo不同之处在于重点演示如何利用FIS自动管理同步、异步资源以及自动合并功能。

modjs-autoload-demo插件介绍

• 使用fis-postprocessor-require-async 分析require.async异步加载资源(可选)
• 使用fis-postpackager-autoload 自动加载同步异步资源
• 使用fis-postpackager-simple 按页面自动合并静态资源，提高性能

安装fis

npm install -g fis

安装成功后执行 fis -h 即可看到相关开发命令帮助

安装fis的扩展插件，这个项目用到的

npm install -g fis-postprocessor-require-async #可选
npm install -g fis-postpackager-autoload
npm install -g fis-postpackager-simple

让代码跑起来！

首先，启动内置的调试服务器：

fis server start

此时fis会启动一个精巧的jetty服务器，并且打开浏览器访问了 http://127.0.0.1:8080 ，现在这个调试环境什么也没有，接下来，我们在命令行下cd到我们下载的样例项目中：

cd modjs-autoload-demo

第三步，执行fis的编译命令：

fis release

第四步，刷新浏览器，查看我们的项目。

可以看到所有的模块化资源均已以标签的形式加载进来了

第五步，优化性能

虽然目前项目可以正常运行，但是这种加载方式会造成连接数过多，让我们调整配置，使用simple插件为我们合并资源

fis release -pf fis-conf-with-simple.js

再次浏览页面，我们可以发现原有的大量静态资源已经自动合并。

目录规范

任何 目录规范、部署规范、编译规范 都是可配置的（配置代码），这里只介绍内置的规范。

内置的规范包括：

1. 扔在 modules 目录下的js、css、less、coffee文件都是模块化文件，会自动包装define，自己就不要写了。使用require.async或者require加载模块的时候id与文件的对应规则是这样的：

文件	引用id	举个例子
/modules/a.js	a	require.async('a');
/modules/b/b.js	b	require.async('b');
/modules/b/c.js	b/c	require.async('b/c');

1. 扔在 ``lib`` 目录下的文件不被认为是模块化的，请直接在页面上使用script或link标签引用。

modjs-autoload-demo's Issues

加上 modjs 后 pkg/map.js 位置没有移到底部，怎么破

加上 modjs 然后开启优化脚本与样式资源引用位置的情况下 ，如下
fis.config.set('settings.postpackager.simple.autoReflow', true);

postpackager : [ 'autoload', 'simple', 'modjs' ]

pkg/map.js 位置没有移到底部，怎么破