用r.js打包模块化javascript文件的示例

序

R.js(本地下载)是requireJS的Optimizer工具，可以实现前端文件的压缩和合并，在requireJS异步按需加载的基础上进一步提供前端优化，从而减少前端文件的大小和对服务器的文件请求。本文将详细介绍r.js的相关内容。有兴趣的朋友会一起看看。

简单包装

[项目结构]

用一个简单的例子来说明r.js的使用这个项目的名字是‘demo’，它在js目录中包含了两个文件，s1.js和s2.js，并且使用requirejs进行了模块化。内容如下

//S1 . jsdefine(function(){ return 1；})//S2 . jsdefine(function(){ return 2；})使用main.js调用s1.js和S2.js。

需要(['s1 '，' s2']，函数(a，b){console.log(a，b)；});index.html的内容如下

！doctype html lang=' en ' head meta charset=' utf-8 ' title document/title script data-main=' js/main ' src=' http 3360 js/require . js '/script/head dy/body/html运行index.html文件时，它所依赖的资源如下图所示

[包装]

接下来使用r.js封装javascript文件，r.js需要使用build.js文件进行配置，如下

({ base URL : })。/'，名为：' main '，out:' out.js'})然后运行命令noder.js-obuild.js。

在项目的根目录下，生成一个包含以下内容的out.js文件

define('s1 '，[]，function(){return 1})，define('s2 '，[]，function(){return 2})，require(['s1 '，' s2']，function(n，e){console.log(n，e)})，define('main '，function(){ })；将index.html的入口文件修改为“out.js”，文件仍然可以正常运行

！用doctype html lang=' en ' head meta charset=' utf-8 ' title document/title script data-main=' js/out ' src=' http 3360 js/require . js '/script/head body/html jquery打包

一般来说，我们不使用原生javascript进行开发，而是使用库进行高效开发。以jQuery为例，对上述代码进行改造

S1模块和s2模块分别基于jQuery获取page div元素的宽度和高度，内容如下

//s1.jsdefine(['./common/jquery']，function (){ return $('div ')。高度()；})//s2.jsdefine(['./common/jquery']，function (){ return $('div ')。宽度()；})项目结构如下。js文件夹包括两个子文件夹：common和module。公共文件夹包含公共require.js和jquery.js，模块文件夹包含模块s1.js和s2.js.

在页面的根目录下，有index.html、main.js、r.js和build.js

[包括jQuery]

如果打包的main.js包含jQuery.js，代码如下

({appDir: '。/'，//项目根目录dir: '。/dist '，//输出目录，打包后将放置所有文件的文件夹(如果没有，将自动创建)，baseUrl3360 '。/'，modules 3360[//要优化的模块，相对于baseurl的路径，也通过省略后缀来过滤”。js" {name:' main'}]，file exclusiveregex 3360/(r | build)\。js |。* \.scss $/，//，匹配的文件不会输出到输出目录优化CSS : '标准'，删除梳