Skip to content

angular-moon/modjs-autoload-demo

 
 

Repository files navigation

modjs-autoload-demo

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

modjs-autoload-demo插件介绍

安装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:https://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标签引用。

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages

  • JavaScript 92.6%
  • CSS 6.6%
  • HTML 0.8%