RequireJS对文件合并与压缩实现方法
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用，但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
本文为大家讲解的是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对文件合并与压缩实现方法的更多相关文章
- requireJS对文件合并与压缩（二）
requireJS对文件合并与压缩 RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 require ...
- AngularJS结合RequireJS做文件合并压缩的那些坑
我在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须 ...
- 优化RequireJS项目（合并与压缩）
关于RequireJS已经有很多文章介绍过了.这个工具可以将你的JavaScript代码轻易的分割成苦 干个模块(module)并且保持你的代码模块化与易维护性.这样,你将获得一些具有互相依赖关系的J ...
- 优化 RequireJS 项目（合并与压缩） 【已翻译100%】
英文原文:Optimize (Concatenate and Minify) RequireJS Projects 标签: RequireJS Node.js 参与翻译 (1人) : 裴宝亮 本文将演 ...
- grunt配置太复杂？使用Qbuild进行文件合并、压缩、格式化等处理
上次简单介绍了下Qbuild的特点和配置,其实实现一个自动化工具并不复杂,往简单里说,无非就是筛选文件和处理文件.但Qbuild的源码也并不少,还是做了不少工作的. 1. 引入了插件机制.在Qbuil ...
- js文件合并，压缩，缓存，延迟加载
做web前段也有一段时间了,对于web中js文件的加载有些体会想跟大家一起分享一下. 1.首先说说js文件的合并和压缩吧 为了便于集中式管理js的合并和压缩我们创建一个Js.ashx文件来专门处理合并 ...
- upload控件上传json文件合并的两种方法
方法一: byte[] byte1 = FileUpload1.FileBytes; byte[] byte2 = FileUpload2.FileBytes; byte[] a1 = Encodin ...
- django 实现指定文件合并成压缩文件下载
需求是在一列学生列表中选择指定的学生,然后下载他们上传的报告文档.
- 用GruntJS合并、压缩JS文件
为什么要合并.压缩你的JS文件? 一个项目开发完成我们总能发现有一堆js文件非常混乱. 一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加 ...
随机推荐
- 本地如何操作服务器的mysql，详细教程
前置条件: 1.在阿里云服务器de系统是win service 2012. 2.服务器里自己安装了my sql 5.7 3.本地也安装了my sql 5.7 需求:想通过本地的mysql连接上远程的服 ...
- [置顶]
xamarin android Fragment实现底部导航栏
前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...
- Missing number in array
Given an array of size n-1 and given that there are numbers from 1 to n with one missing, the missin ...
- BZOJ1798 AHOI2009 维护数列
1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec Memory Limit: 64 MB Description 老师交给小可可一个维护数列的任务,现在小 ...
- layer遮罩层 简单的遮罩层
在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...
- lesson - 5 Linux用户和组管理
1. /etc/passwd由 : 分隔成7个字段(1) 用户名 规则:大小写字母.数字.减号(不能出现在首位).点以及下划线,其他字符不合法 (2) x 放密码,安全起见放到 /etc/shadow ...
- crm踩坑记(三)
React 如何同步更新state 由于setState方法是异步的,而通常很多时候在一个生命周期里更新state后需要在另一个生命周期里使用这个state. 下面介绍几个方法 // 1 this.s ...
- UNIX域协议（命名套接字）
这里主要介绍命名UNIX域套接字 1.什么是UNIX域套接字Unix域协议并不是一个实际的协议族,而是在单个主机上执行客户/服务通信的一种方式.是进程间通信(IPC)的一种方式.它提供了两类套接字:字 ...
- VMware_ubuntu设置共享文件夹
1. 点击安装VMware tools 2.将/media/vmtool的压缩包复制到/home/pc/vm_tool下,应为原路径在root权限下竟然也是只读的,并且无法更改. 3.进入/home/ ...
- 一、 kettle开发、上线常见问题以及防错规范步骤
此篇说明对应的kettle版本是6.1,实际使用时7.x应该也是一样的. 一. kettle开发流程(规范步骤,防止出错) (一) Kettle设置检查 资源库连接 如果不加一下配置 ...