r.js合并实践

项目中用到require.js做生产时模块开发，但上线要合并压缩，幸好它配套有r.js。下面就其用法说明一下。

首先建一个目录，里面的结构如下：

  • require.js可以到r.js项目下载
  • r.js可以到r.js项目下载
  • server.exe可以到avalon项目下载
  • jquery可以到JQ官网下载
  • avalon.js可以到avalon项目下载，并把里面的loader: true改为 loader: false，禁止自带的加载器。
  • main.js是用于配置加载选项的，如shim机制，有时还做一些初始化操作。
  • build.js是用于合并压缩的。

index.html的内容如下：

<!doctype html>

<html>

    <head>

        <title>avalon+requirejs</title>

        <meta charset="utf-8">

        <script data-main="js/main" src="require.js"></script>

        <style type="text/css">

            .wrapper {

                width: 200px;

                height: 200px;

                background: gray;

            }

        </style>

    </head>

    <body>

        <div class="wrapper" ms-controller="xxx">{{str}}</div>

    </body>

</html>

main.js的内容以下：

require.config({

    baseUrl: 'js',

    paths: {

        jquery: 'jquery',

        avalon: 'avalon'

    },

    shim: {

        jquery: {

            exports: "jQuery"

        },

        avalon: {

            exports: "avalon"

        }

    }

});

require(['avalon',"jquery"], function(avalon, Q) {

   Q("body").append("test jq")

   avalon.define("xxx", function(vm){

       vm.str = "加载成功"

   })

   avalon.scan()

});

因为main.js是相当于require.js的下一级目录中，需要设置baseUrl。由于avalon与jquery都不是根据严格的AMD定义它的库的结构（即，没有用define方法包裹起来），我们需要通过shim机制处理一下。最后，我们还手动加载avalon，进行扫描绑定！

然后点击 server.exe，打开IE或chrome。页面加载，它就会加载require.js。require.js会找到加载它的那个script节点，发现它定义了data-main属性，根据它的值去加载js/main.js文件，然后它配置自身，然后加载avalon并完成页面的重新渲染！

我们再来看合并压缩。打开build.js，里面的内容如下：

({

    baseUrl: '',

    paths: {

        jquery: 'jquery',

        avalon: 'avalon'

    },

    shim: {

        jquery: {

            exports: "jQuery"

        },

        avalon: {

            exports: "avalon"

        }

    },

    name: "main",

    out: "main-built.js"

})

你想r.js做压缩，还有一个必要条件，得安装node.js，这个不详谈了，自己百度谷哥。然后要安装r.js，window下打开控制台，输入npm install -g requirejs。然后定位到js目录下，输入node r.js -o build.js，然后该目录下就会多出main-built.js这个文件，表示合并成功！

然后上线时，将index.html中 data-main="js/main"改成 data-main="js/main-built"就行了。

build.js用到的配置项，英文文档可见这里

如果您觉得这文章对您有帮助，可以打赏点钱给我，鼓励我继续写博，我的支付宝

 
 
 
标签: javascript

r.js实践的更多相关文章

  1. r.js合并实践 --项目中用到require.js做生产时模块开发 r.js build.js配置详解

    本文所用源代码已上传,需要的朋友自行下载:点我下载 第一步: 全局安装  npm install -g requirejs 第二步: 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, ...

  2. r.js合并实践

    项目中用到require.js做生产时模块开发,但上线要合并压缩,幸好它配套有r.js.下面就其用法说明一下. 首先建一个目录,里面的结构如下: require.js可以到r.js项目下载 r.js可 ...

  3. 【实践】require.js + r.js 代码打包压缩初体验

    第二个分享的是学校项目所接触到的新知识,代码压缩 + 代码打包 这次的项目用了require.js 这个插件做模块化管理的工具,所谓模块化就是在开发的过程中将功能划分成一个独立的模块,使代码可读性更强 ...

  4. r.js 配置文件 build.js 不完整注释

      -----------------------------------------------------------------------r.js 配置文件 example.build.js ...

  5. require.js实践

    ASP.NET MVC应用require.js实践 这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41 ...

  6. require.js 加载 vue组件 r.js 合并压缩

    https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...

  7. JavaScript模块化－require.js，r.js和打包发布

    在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发 ...

  8. 应用r.js来优化你的前端

    r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用 ...

  9. r.js结合gulp等于webpack（angular为例）

    本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...

随机推荐

  1. 省前训练...Orz

    A. 异形卵 Time Limit: 1000ms Memory Limit: 128000KB 64-bit integer IO format:      Java class name: Sub ...

  2. ASPxComboBox控件联动效果bug改进

    原文:ASPxComboBox控件联动效果bug改进 在应用第三方控件DevExpress控件的时候,大家应该对ASPxComboBox控件应该不是很陌生吧,尤其在做多级联动效果的时候,有着它独特的地 ...

  3. 杭州电acm理工大舞台版

    我要参加全国软件设计大赛C/C++学生语言组,前一个假设<C训练和演习,并总结手>没看完,请阅读上述并根据所作的训练,然后做下面的练习. 门户:http://blog.csdn.net/l ...

  4. Oracle 用户权限管理方法

    Oracle 用户权限管理方法 sys;//系统管理员,拥有最高权限 system;//本地管理员,次高权限 scott;//普通用户,密码默认为tiger,默认未解锁 sys;//系统管理员,拥有最 ...

  5. Mybatis 构造resultMap 搜sql

    映射配置文件 <!-- type:映射数据类型的实体类 id:resultMap的唯一标识 --> <resultMap type="person" id=&qu ...

  6. 一个奇怪的注意事项TNS-12545 TNS-12560 TNS-00515

    近来的reportDB无法从一开始就与系统收听,比较奇怪的现象. 由于server有听众的一个实例上正常启动,这是不是从开始监听器的实例手动启动是正常的.所以写下来未能找到离奇写的原因. 1.故障现象 ...

  7. c++的string容器

    c++相比c的一个好处就是实现了很多的容器和泛型算法,使得程序员的工作得到了很大的化简.其中一个很有用的泛型容器就是string.string是一个类,是一个在STL里边实现好了的类,由于他的很多功能 ...

  8. Routing路由

    Routing路由 新版Routing功能介绍 在ASP.NET 5和MVC6中,Routing功能被全部重写了,虽然用法有些类似,但和之前的Routing原理完全不太一样了,该Routing框架不仅 ...

  9. Javascript闭包的一些研究

    原文:Javascript闭包的一些研究 本文不谈闭包的概念,因为概念容易把人搞晕,本文希望通过几个鲜活的例子来探究闭包的性质,相信对理解闭包会有所帮助. 程序1 var f = (function( ...

  10. jQuery性能优化38建议---最引人注目的用户体验！

    一.需要注意的是的定义jQuery当变量被添加varkeyword 然而,这并不jQuery.整个javascript开发过程,所有需要注意,一定不要将其定义为下面的示例: $loading = $( ...