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的地址來加載全部的代碼：

3、配置介紹

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裏配置

 

4、加載機制

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 文件路徑

 

5、利用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