requireJS对文件合并与压缩

RequireJS提供了一个打包与压缩工具r.js，r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler。r.js下载

requireJS对互相依赖模块进行合并与压缩，可以对JS，CSS压缩，甚至可以对整个项目进行打包。r.js是基于nodeJS的，所以本机电脑上需要有node环境。

下面还是来看看我整个项目结构吧，如下：

现在是这样的，app/a.js，app/b.js，app/c.js，app/d.js，有依赖关系，分别是a依赖于b，b依赖于c，c依赖于d，入口文件app.js，

代码如下：

 a.js 

define(["app/b"],function (b) {

return {

"name":1

}

});

b.js

define(function(require, exports, module) {

var c = require('app/c');

});

c.js

define(function(require, exports, module) {

var d = require('app/d');

});

d.js

define(function(require, exports, module) {

alert(1);

});

app.js

require(['app/a'],function(jq){

});

如果我不压缩与合并代码，那么我们在浏览器下看请求如下：

现在我们一步步来解释下合并与压缩吧！

一：打开cmd命令窗口，进入项目requirejs内，如下：

执行命令 node r.js –o baseUrl=js  name=app out=build.js命令即可，如上所示已经在根目录下生成build.js了，我们下面再来看看目录结构如下：

下面我们再来看看build.js代码了，如下所示：

define("app/d",["require","exports","module"],function(e,t,n){alert(1)}),define("app/c",["require","exports","module","app/d"],function(e,t,n){var r=e("app/d")}),define("app/b",["require","exports","module","app/c"],function(e,t,n){var r=e("app/c")}),define("app/a",["app/b"],function(e){return{name:1}}),require(["app/a"],function(e){}),define("app",function(){});

已经对app.js，app/a.js，app/b.js，app/c.js，app/d.js，的代码进行合并与压缩了。

接着我们在index.html代码要如下调用：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="require.js" defer async="true" data-main="build"></script>

</head>

<body>

</body>

</html>

直接从build.js内进行加载，现在我们再来看看浏览器内的请求如下所示：

现在只有2个请求了，且也可以执行里面的代码了。

下面我们对命令分别来做一下解释：

-o： 表示优化，该参数是固定的，必选。

baseUrl：指存模块的根目录，可选。

name： 模块的入口文件，这里是app,那么r.js会从baseUrl+name去查找app.js，然后找出所有依赖的模块，然后进行合并与压缩。

out: 指合并压缩后输出的文件路径，这里是直接输出在根目录下build.js 我们也可以输出到其他目录下 比如js/app 目录下，也可以的。

上面的demo已经可以对有依赖的模块进行合并与压缩了，但是目前还不能满足我们的需求，因为代码已经合并且压缩了，对于我们调式代码并不是很方便，所以我接下来给大家来介绍另外1个参数：

1. optimize(none/uglify/colsure)，指定是否压缩，默认为uglify。

我们可以指定为none，只合并不压缩。代码如下：

命令如下：

node r.js –o baseUrl=js name=app out=build.js optimize=none.

现在我们再来看看build.js文件代码截图如下：

现在是所有的js文件在一个目录下，那如果js文件在不同的文件夹下面呢？是不是也可以合并呢？当然可以，只要指定依赖就可以了，我们再来演示下。加入我现在js目录下在新建一个文件叫app2,，如下所示：

现在在app2目录下新建一个js文件，假如叫e.js，那么在app目录下的d.js代码要改成如下了：

define(function(require, exports, module) {

var d = require('app2/e');

});

对app2/e.js进行依赖即可。

我们再来运行下命令如下所示：

如上可以看到e.js也被合并与压缩了。

上面的是直接敲打命令，我们现在也可以先安装r.js,安装如下：

npm install –g requirejs

如下所示表示已经安装成功了。

除了上面直接在命令行提供参数设置以外，也可以将参数写入一个文件，假定配置名称为config.js，

代码如下：

({

baseUrl: "js",

name: "app",

out: "app-built.js"

})

然后进入相应的目录，在命令行下使用r.js来运行config.js文件，如下所示：命令：node r.js  -o config.js

我们再看看生成文件app-built.js，

在页面上引入这个文件也可以了。

requireJS对文件合并与压缩（二）的更多相关文章

  1. RequireJS对文件合并与压缩实现方法

    RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...

  2. AngularJS结合RequireJS做文件合并压缩的那些坑

    我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...

  3. 优化RequireJS项目（合并与压缩）

    关于RequireJS已经有很多文章介绍过了.这个工具可以将你的JavaScript代码轻易的分割成苦 干个模块(module)并且保持你的代码模块化与易维护性.这样,你将获得一些具有互相依赖关系的J ...

  4. 优化 RequireJS 项目（合并与压缩） 【已翻译100%】

    英文原文:Optimize (Concatenate and Minify) RequireJS Projects 标签: RequireJS Node.js 参与翻译 (1人) : 裴宝亮 本文将演 ...

  5. grunt配置太复杂？使用Qbuild进行文件合并、压缩、格式化等处理

    上次简单介绍了下Qbuild的特点和配置,其实实现一个自动化工具并不复杂,往简单里说,无非就是筛选文件和处理文件.但Qbuild的源码也并不少,还是做了不少工作的. 1. 引入了插件机制.在Qbuil ...

  6. js文件合并，压缩，缓存，延迟加载

    做web前段也有一段时间了,对于web中js文件的加载有些体会想跟大家一起分享一下. 1.首先说说js文件的合并和压缩吧 为了便于集中式管理js的合并和压缩我们创建一个Js.ashx文件来专门处理合并 ...

  7. django 实现指定文件合并成压缩文件下载

    需求是在一列学生列表中选择指定的学生,然后下载他们上传的报告文档.

  8. 用GruntJS合并、压缩JS文件

    为什么要合并.压缩你的JS文件?        一个项目开发完成我们总能发现有一堆js文件非常混乱.           一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加 ...

  9. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

随机推荐

  1. springboot整合rabbitmq

    概述 RabbitMQ是一个开源的消息代理和队列服务器,用来通过普通协议在完全不同的应用之间共享数据,或者简单地将作业队列以便让分布式服务器进行处理. 它现实了AMQP协议,并且遵循Mozilla P ...

  2. 关于网页授权的两种scope的区别说明

    关于网页授权的两种scope的区别说明 1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回 ...

  3. MEAN 全栈开发 ——实现简单博客

    最近在学习MEAN全栈开发的过程中,写了一个小程序就当练练手熟悉一下怎么去组合强大的功能. 废话不多说,直接上文件预览: 整体文件结构: 其中,public文件夹存放了img,js,css文件,其中的 ...

  4. FiddlerCoreAPI开发（一）源码分析

    1.前言 前一段时间想利用fiddlercore截取本地HTTPS的流量做一些分析,按照样例代码的注释学习了一下,没搞清楚怎么实现,后来又在网上查了些资料,对HTTPS的处理提及很少,都没有解决我的问 ...

  5. 遍历输出tuple元素的简洁方式(C++11)

    //遍历输出tuple元素的简洁方式(C++11) //Win32Con17_VS2017_01.cpp #include <iostream> #include <tuple> ...

  6. MySQL · 引擎特性 · InnoDB 事务系统

    前言 关系型数据库的事务机制因其有原子性,一致性等优秀特性深受开发者喜爱,类似的思想已经被应用到很多其他系统上,例如文件系统等.本文主要介绍InnoDB事务子系统,主要包括,事务的启动,事务的提交,事 ...

  7. iWeb峰会（HTML5峰会）2015年7月19日上海站会后感想

         上周日专门从南京跑到上海參加了iWeb峰会(HTML5峰会),感觉这一天去的挺值的.几个演讲都挺精彩,干货不少啊.       总体感觉随着2014年HTML5标准的终于定稿,最近HTML5 ...

  8. Swift入门（五）——数组（Array）

    集合 集合的定义 Swift中提供了两种数据结构用于存放数据的集合,各自是数组(Array)和字典(Dictionary). 他们的主要差别在于数组中的元素由下标确定.而字典中的数据的值由数据的键(K ...

  9. Codeforces 29D Ant on the Tree 树的遍历 dfs序

    题目链接:点击打开链接 题意: 给定n个节点的树 1为根 则此时叶子节点已经确定 最后一行给出叶子节点的顺序 目标: 遍历树并输出路径.要求遍历叶子节点时依照给定叶子节点的先后顺序訪问. 思路: 给每 ...

  10. 前端笔记---塌陷top

    一.在设置盒子div的子元素的外边框margin-top,子元素属性不起作用,父元素下沉: <!DOCTYPE html> <html lang="en"> ...