r.js自动打包
使用r.js 进行打包。
一，工程结构
首先，requirejs 模块化的工程
例如：
app.js 4个依赖
(1)jquery
(2)backbone
(3)bootstrap
(4)helper.js
以上需要5个请求，
4个依赖+app.js 合并为一个js，只需要一个请求，提升生产上的速度；
我们现阶段的目的：
开发阶段：
不打包，不压缩，模块化开发；
部署阶段：
自动打包，压缩
二，使用介绍
requirejs:
https://github.com/requirejs/requirejs
异步加载
模块化开发：
一个文件 一个模块（可维护，可读性强）
减少全局变量
define: 定义模块
第一个参数为定义的模块名，如果不写为文件路径；
define('helper',['jquery'],function($){
return {
trim:function(str){
return $.trim(str);
}
}
});
require:加载模块 :
require(['helper'],function(helper)){
var str=helper.trim(' amd');
console.log(str);
});
加载文件
requirejs (require 加载模块时)以一个相对于baseurl的地址来加载所有的代码：
三、配置介绍
1，html 页面直接引用,baseurl 是相对于页面的
<script src=""/js/require.js></script>
2，data-main
<script src=""/js/require.js data-main="js/app.js"></script>
3，手动配置baseurl
requireMain里配置
四、加载机制
requireJS 使用head.appendChild()将每一个依赖加载为一个script标签；（可以跨域访问，可以从cdn上直接获取js文件）
加载即执行；
配置模块路径：
（1）baseUrl
（2）path: 映射不放于baseUrl下的模块名
定义模块：
函数式定义 define 不写函数名
define('helper',['jquery'],function($){
return {
trim:function(str){
return $.trim(str);
}
}
});
定义简单的对象：
define({
username:'fnncat',
name:'xiaohui',
emial:'fnncat@gmail.com',
gender:'女'
})
配置不支持AMD的库和插件
.modernizr
bootsrap
配置shim
modernizr 只有全局变量
shim:{
'modernizr':{ //不支持AMD的模块
deps:['jquery'], //依赖的模块
exports:'Modernizr', //全局变量作为模块对象
init:function($){ //初始化函数，返回的对象代替exports作为模块对象
return $;
}
}
}
加载不支持AMD的框架。如bootstrap
shim:{
'bootsrap':['jquery']
}
常用的配置项
map 加载不同的版本
waitSecongs 下载等待的事件，默认7秒，如果设为0，禁用超时
urlargs, 下载文件时，在url后增加额外的query 参数
requirejs 中的jsonp
是json的一种使用模式，可以跨域获取数据， 如json
同源策略：www.baidu.com通过ajax不能获取www.qq.com的数据
requirejs 可以直接
require(['获取js地址'],function(){
})
使用text插件加载html
https://github.com/requirejs/text
插件text.js
用于加载文本文件的requirejs插件
通过ajax请求来请求文本 前缀text!
require(['text!/user.html'],function(template){
$('userinfo').html(template);
});
插件css
https://github.com/guybedford/require-css
用于加载样式文件的requirejs插件
css!+css 文件路径
五、利用r.js进行打包
在开发阶段，随着js框架和库的引入，页面js的加载个数就越来月多，严重的影响了页面的相应速度，于是我们就需要对js 和css 打包。
工具r.js
安装：
npm install -g requirejs 本地开发
下载文件：https://github.com/requirejs/r.js 服务器
r.js
使用配置文件来打包
node r.js -o app.build.js
