r.js合并实践

时间：2022-02-05 08:26:01

项目中用到require.js做生产时模块开发，但上线要合并压缩，幸好它配套有r.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这个文件，表示合并成功！

r.js合并实践

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

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

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

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

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

  2. require&period;js 加载 vue组件 r&period;js 合并压缩

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

  3. requirejs实验002&period; r&period;js合并文件&period; 初体验&period;

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

  4. r&period;js实践

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

  5. require&period;js 最佳实践【转】

    https://www.cnblogs.com/digdeep/p/4607131.html require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(re ...

  6. require&period;js 最佳实践

    require.js是一个js库,相关的基础知识,前面转载了两篇博文:Javascript模块化编程(require.js), Javascript模块化工具require.js教程,RequireJ ...

  7. 转&colon; requirejs压缩打包r&period;js使用示例 2 &lpar;~~很详细的教程&rpar;

    这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...

  8. 使用r&period;js进行前端repuirejs的合并压缩

    安装 requirejs npm install -g requirejs 安装好后: 找到刚刚requirejs的安装目录,在该目录下找到r.js,并拷贝待压缩合并项目的根目录下 在项目根目录下创建 ...

  9. requireJS中如何用r&period;js对js进行合并和压缩css文件

    我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...

随机推荐

  1. asp&period;net LINQ防止SQL注入式攻击

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  2. SaveData Functions

    Here are some save function for some situations: Yes/No /// <summary> ///保存数据到WCF /// </sum ...

  3. oracle 11g impdp时 报ORA-12899&lpar;转&rpar;

    源库ZHS16BGK,汉字在数据库存放的时候占用两个字节 目标库UTF8,汉字在数据库里存放的时候占用三个字节 由于字符集不同,导致现在数据库impdp的时候有些表的字段长度不够,出现ORA-1289 ...

  4. python解析Yahoo的XML格式的天气预报，获取当天和近期几天的天气：

    下面是接口xml格式数据: <rss xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo=& ...

  5. DOM-----style属性对照表

    CSS和Java script 标签对照表 盒子标签和属性对照 CSS语法 (不区分大小写) Java script 语法 (区分大小写) border border border-bottom bo ...

  6. Educational Codeforces Round 54 &lbrack;Rated for Div&period; 2&rsqb; （CF1076）

    第一次在宿舍打CF 把同宿舍的妹子吵得不行... 特此抱歉QAQ A 题意:给定一个字符串, 最多删掉一个字符,使得剩余字符串字典序最小 n<=2e5 当然"最多"是假的 删 ...

  7. go websocket

    websocket介绍 The WebSocket Protocol  RFC6455,这个是WebSocket的RFC文档,所以内容非常全面(当然只涉及协议,不涉及具体实现),不过内容太多,如果是初 ...

  8. zTree实战

    1.实体 public class UserDataZTreeVo { private String id; private String pid; private String name; priv ...

  9. Android开发之解决APP启动白屏或者黑屏闪现的问题

    在做搜芽的过程中,发现那个外包人缘做的不行,由于启动的时候会停顿,然后白屏一会,联想到几个月前我在我的三僚企业通信软件里面拉起9K-Mail的时候也会黑屏,所以决定学习一下.解决一下.这不,万能的网络 ...

  10. VS2015 打包winform 安装程序

    最近开发了一个小软件.由于需要打包.网上找了一些资料.然后整合了起来.希望对大家有所帮助.不全面请见谅. 打包控件 InstallShield-Limited-Edition  下面是注册地址 htt ...

相关文章