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