使用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