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中元素文本, ...
- require.js 加载 vue组件 r.js 合并压缩
https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...
- requirejs实验002. r.js合并文件. 初体验.
requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...
- r.js实践
r.js合并实践 项目中用到require.js做生产时模块开发,但上线要合并压缩,幸好它配套有r.js.下面就其用法说明一下. 首先建一个目录,里面的结构如下: require.js可以到r.js项 ...
- require.js 最佳实践【转】
https://www.cnblogs.com/digdeep/p/4607131.html require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(re ...
- require.js 最佳实践
require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(require.js), Javascript模块化工具require.js教程,RequireJ ...
- 转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)
这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...
- 使用r.js进行前端repuirejs的合并压缩
安装 requirejs npm install -g requirejs 安装好后: 找到刚刚requirejs的安装目录,在该目录下找到r.js,并拷贝待压缩合并项目的根目录下 在项目根目录下创建 ...
- requireJS中如何用r.js对js进行合并和压缩css文件
我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...
随机推荐
- python字符串操作实方法大合集
python字符串操作实方法大合集,包括了几乎所有常用的python字符串操作,如字符串的替换.删除.截取.复制.连接.比较.查找.分割等,需要的朋友可以参考下: #1.去空格及特殊符号 s.st ...
- What is the best way to handle Invalid CSRF token found in the request when session times out in Spring security
18.5.1 Timeouts One issue is that the expected CSRF token is stored in the HttpSession, so as soon a ...
- AbstractRoutingDataSource实现动态数据源切换 专题
需求:系统中要实现切换数据库(业务数据库和his数据库) 网上很多资料上有提到AbstractRoutingDataSource,大致是这么说的 在Spring 2.0.1中引入了AbstractRo ...
- python 3 中的raw_input 报错
raw_input() was renamed to input()
- Mongodb数据库操作
mysql/mongodb对比 CREATE TABLE USERS (a Number, b Number) Implicit or use MongoDB::createCollection() ...
- 14.app后端如何设计api
app和后端的交互,一般都是通过后端提供的api实现.api的设计,估计很多刚进入app后端的小伙伴会一无头绪,不知道怎么入门.下面根据自己3年的app后端经验,总结出下几个api设计原则,给小伙伴参 ...
- redis基础操作~~数据备份与恢复、数据安全、性能测试、客户端连接、分区
数据备份与恢复 数据备份redis save 命令用于创建当前数据库的备份. redis 127.0.0.1:6379> SAVE OK 该命令将在 redis 安装目录中创建dump.rdb文 ...
- python之分析decode、encode、unicode编码转换
decode()方法使用注册编码的编解码器的字符串进行解码.它默认为默认的字符串编码.decode函数可以将一个普通字符串转换为unicode对象.decode是将普通字符串按照参数中的编码格式进行解 ...
- BZOJ_3238_[Ahoi2013]差异_后缀数组+单调栈
BZOJ_3238_[Ahoi2013]差异_后缀数组+单调栈 Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao ...
- Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页
1.关于LigerUI: LigerUI 是基于jQuery 的UI框架,其核心设计目标是快速开发.使用简单.功能强大.轻量级.易扩展.简单而又强大,致力于快速打造Web前端界面解决方案,可以应用于. ...