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

 

posted @ 2017-11-06 21:14  fnncat  阅读(1281)  评论(0编辑  收藏  举报