r.js实践
r.js合并实践
项目中用到require.js做生产时模块开发，但上线要合并压缩，幸好它配套有r.js。下面就其用法说明一下。
首先建一个目录，里面的结构如下：
- require.js可以到r.js项目下载
- r.js可以到r.js项目下载
- server.exe可以到avalon项目下载
- jquery可以到JQ官网下载
- avalon.js可以到avalon项目下载，并把里面的loader: true改为 loader: false，禁止自带的加载器。
- main.js是用于配置加载选项的，如shim机制，有时还做一些初始化操作。
- build.js是用于合并压缩的。
index.html的内容如下：
<!doctype html>
<html>
<head>
<title>avalon+requirejs</title>
<meta charset="utf-8">
<script data-main="js/main" src="require.js"></script>
<style type="text/css">
.wrapper {
width: 200px;
height: 200px;
background: gray;
}
</style>
</head>
<body>
<div class="wrapper" ms-controller="xxx">{{str}}</div>
</body>
</html>
main.js的内容以下：
require.config({
baseUrl: 'js',
paths: {
jquery: 'jquery',
avalon: 'avalon'
},
shim: {
jquery: {
exports: "jQuery"
},
avalon: {
exports: "avalon"
}
}
});
require(['avalon',"jquery"], function(avalon, Q) {
Q("body").append("test jq")
avalon.define("xxx", function(vm){
vm.str = "加载成功"
})
avalon.scan()
});
因为main.js是相当于require.js的下一级目录中，需要设置baseUrl。由于avalon与jquery都不是根据严格的AMD定义它的库的结构（即，没有用define方法包裹起来），我们需要通过shim机制处理一下。最后，我们还手动加载avalon，进行扫描绑定！
然后点击 server.exe，打开IE或chrome。页面加载，它就会加载require.js。require.js会找到加载它的那个script节点，发现它定义了data-main属性，根据它的值去加载js/main.js文件，然后它配置自身，然后加载avalon并完成页面的重新渲染！
我们再来看合并压缩。打开build.js，里面的内容如下：
({
baseUrl: '',
paths: {
jquery: 'jquery',
avalon: 'avalon'
},
shim: {
jquery: {
exports: "jQuery"
},
avalon: {
exports: "avalon"
}
},
name: "main",
out: "main-built.js"
})
你想r.js做压缩，还有一个必要条件，得安装node.js，这个不详谈了，自己百度谷哥。然后要安装r.js，window下打开控制台，输入npm install -g requirejs。然后定位到js目录下，输入node r.js -o build.js，然后该目录下就会多出main-built.js这个文件，表示合并成功！
然后上线时，将index.html中 data-main="js/main"改成 data-main="js/main-built"就行了。
build.js用到的配置项，英文文档可见这里
如果您觉得这文章对您有帮助，可以打赏点钱给我，鼓励我继续写博，我的支付宝
r.js实践的更多相关文章
- r.js合并实践 --项目中用到require.js做生产时模块开发 r.js build.js配置详解
本文所用源代码已上传,需要的朋友自行下载:点我下载 第一步: 全局安装 npm install -g requirejs 第二步: 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, ...
- r.js合并实践
项目中用到require.js做生产时模块开发,但上线要合并压缩,幸好它配套有r.js.下面就其用法说明一下. 首先建一个目录,里面的结构如下: require.js可以到r.js项目下载 r.js可 ...
- 【实践】require.js + r.js 代码打包压缩初体验
第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...
- r.js 配置文件 build.js 不完整注释
-----------------------------------------------------------------------r.js 配置文件 example.build.js ...
- require.js实践
ASP.NET MVC应用require.js实践 这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41 ...
- require.js 加载 vue组件 r.js 合并压缩
https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...
- JavaScript模块化－require.js，r.js和打包发布
在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发 ...
- 应用r.js来优化你的前端
r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用 ...
- r.js结合gulp等于webpack（angular为例）
本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...
随机推荐
- Windows Server 2008 网管数据采集 努力做“日拱一卒“
Windows Server 2008R2系统管理[刘道军主讲MCITP课程] http://edu.51cto.com/course/course_id-510.html Windows Serve ...
- PHP memcache实现消息队列实例
现在,memcache于server缓存广泛应用.下面我来介绍一下memcache消息队列中等待的样本实现,有需要了解的朋友可以参考. memche消息队列原则key上做文章.后消息或者日志. 然后通 ...
- JAVA设计模式（09）：结构化-代理模式（Proxy）
一,定义: 代理模式(Proxy):为其它对象提供一种代理以控制对这个对象的訪问. 二.其类图: 三,分类一:静态代理 1,介绍:也就是须要我们为目标对象编写一个代理对象,在编译期就生成了这个代理对 ...
- rdlc报告vs2008编辑正常，在vs2012在对错误的编辑
最近我们的系统开发的工具vs2008升级到2012,由于系统是非常的报告是由rdlc发展.今天 有需要修改的报告满足需求.直接使用vs2012正确rdlc报告编辑,结果本次变动后.报表都报错. 后来我 ...
- ASP.NET MVC 使用TryUpdateModel 更新的技巧
有使用 ASP.NET MVC 的朋友應該會對於 TryUpdateModel 有一定的認知,他不但可以利用 Metadata 來做欄位的驗證確保資料的正確性,也可以指定更新的條件以及不更新的條件來達 ...
- 互联网点对点通讯（P2P）
摘自: http://www.cnblogs.com/zhili/archive/2012/09/14/p2p_pnpr.html 很遗憾,目前看了下代码,我测试只是做到了本地p2p. [C# 网络编 ...
- 孙陪你，了解它的力量——unity3d流程暂停
干unity3dproject什么时候,有时需要对进程暂停一段时间. 有人建议使用yield return new WaitForSeconds(value);使用的方法如以下: IEnumerato ...
- 多线程学习之三生产者消费者模式Guarded Suspension
Guarded Suspension[生产消费者模式] 一:guarded suspension的参与者--->guardedObject(被防卫)参与者 1.1该 ...
- 基于jsoup的Java服务端http(s)代理程序-代理服务器Demo
亲爱的开发者朋友们,知道百度网址翻译么?他们为何能够翻译源网页呢,iframe可是不能跨域操作的哦,那么可以用代理实现.直接上代码: 本Demo基于MVC写的,灰常简单,copy过去,简单改改就可以用 ...
- MVC模型部分验证
ASP.NET MVC模型部分验证 在很多情况下,我们为了代码的复用可能会存在ViewModel共用的情形.比方说,web应用中常常会遇到的一个需求就是用户找回密码的功能.用户首先要验证通过验证邮箱( ...