转载 r.js打包经验

例子1

先是HTML页面

<!DOCTYPE html>
<html>
    <head>
        <title>My App</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script data-main="scripts/main-built" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My App</h1>
    </body>
</html>

js都放在scripts目录下，换言之 html与scripts是平级。此目录下有r.js, require.js, one.js, two.js, three.js, main.js

上面HTML提到的main-built.js是一会儿动态生成的。

r.js 可以在这里找到https://github.com/jrburke/r.js/blob/master/dist/r.js，总共7MB，非常疯狂！听说把各种情况都hold住了， 比spm强大多了！

接着是几个JS的内容：

one.js

define(function(){
    return 1
})

two.js

define(function(){
    return 2
})

three.js

define(function(){
    return 3
})

main.js

require(["one", "two", "three"], function (one, two, three) {
    alert(one+two+three)
});

好了，我们再看一下build.js如何写

({
    baseUrl: ".",
    name: "main",
    out: "main-built.js"
})

定位到此目的，执行node r.js -o build.js

最后生成main-built.js文件，我格式化它一下，里面内容如下：

define("one",[],function(){return 1}),
define("two",[],function(){return 2}),
define("three",[],function(){return 3}),
require(["one","two","three"],function(e,t,n){alert(e+t+n)}),define("main",function(){});

最后运行服务器，发现真的能alert出6！

可以点击这里看看

例子2

就是在上面的例子里面改一下

其他变化如下：

three.js放到sub目录下，内容改成：

define(["./two"], function(a){
    return 1 + a
})

one.js

define(["./two"], function(a){
    return 1 + a
})

main.js改成

require(["one","sub/three"], function (one,  three) {
    console.log(one + three)
})

执行r.js，生成main-built.js为：

define("two", [], function() {
    return 2
}), define("one", ["./two"], function(e) {
    return 1 + e
}), define("sub/three", [], function() {
    return 30
}), require(["one", "sub/three"], function(e, t) {
    console.log(e + t)
}), define("main", function() {
});

下面合并前后的请求数比较

例子3， paths配置项的使用

目录结构改成这样，jquery自行到官网下载

main.js改成这样

require.config({
    paths: {
        jquery: "jquery/jquery-1.11.2"
    }
})
require(["one", "sub/three","jquery"], function(one, three, $) {
    console.log(one + three)
    console.log($)
});

main.js改成这样

({
    baseUrl: ".",
    name: "main",
    paths: {
        jquery: "jquery/jquery-1.11.2"
    },
    out: "main-built.js"
})

然后执行node r.js -o build.js打包命令，生成的文件就可以用了。并且发现r.js有个非常智能的地方，如果把main.js中的require语句的依赖项中的jquery去掉，再执行打包，它会将jquery源码从main-built.js中去掉。

可以点击这里看看

例子4, 让生产环境用的脚本放在另一个文件中

我们通常把我们自己工作的环境叫做发展环境， 上线的环境叫生产坏境，将它们分开是非常有好处的。我们把上面的目录复制一下，改一名字：

相对而言， 页面也改一下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>My App</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script data-main="develop/main-built" src="develop/avalon.js"></script>
        <!--    <script data-main="develop/main" src="develop/avalon.js"></script>-->
        <!--    <script data-main="develop/main-built" src="develop/require.js"></script>-->
    </head>
    <body>
        <h1>My App</h1>
    </body>
</html>

打包的脚本build.js变成这样，

({
    baseUrl: ".",
    paths: {
        jquery: "jquery/jquery-1.11.2"
    },
    dir: "../production",
    name: "main"
})

对比一下，有了dir，就不能使用out配置项了，你在编译时它有非常明确的提示。执行node r.js -o build.js打包命令，你的项目变成这样了

既然目录变了，我们有两个办法，1自己修改或通过脚本修改index.html引用脚本的路径，2后端配置一下，对请求进行重定向，我们通常是使用后面一种。

可以点击这里看看

例子5, shim配置项的使用

在例子4里面jquery目录添加一个jquery.aaa.js，内容如下：

jQuery.fn.aaa = function(){
    alert("aaa")
}

main.js改成

require.config({
    paths: {
        jquery: "jquery/jquery-1.11.2",
        aaa: "jquery/jquery.aaa"
    },
    shim: {
        aaa: {
            deps: ["jquery"],
            exports: "jQuery"
        }
    }
})
require(["one", "sub/three", "aaa"], function(one, three, $) {
    console.log(one + three)
    console.log($.fn.aaa)
})

build.js也跟着改成

require.config({
    paths: {
        jquery: "jquery/jquery-1.11.2",
        aaa: "jquery/jquery.aaa"
    },
    shim: {
        aaa: {
            deps: ["jquery"],
            exports: "jQuery"
        }
    }
})
require(["one", "sub/three", "aaa"], function(one, three, $) {
    console.log(one + three)
    console.log($.fn.aaa)
})

然后执行node r.js -o build.js打包命令，生成的文件就可以用了。

可以点击这里看看

如果大家还有更好的打包方式， 可以https://github.com/avalonjs/avalonjs.github.io/tree/master/zh/engineering,添加到这里，pull request给我

转载来源：http://www.cnblogs.com/rubylouvre/p/4262569.html

时间： 2024-10-04 16:51:13

转载 r.js打包经验的相关文章

requirejs 使用实例r.js打包

在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install [email protected]1.11.1 --save 创建基本目录: js/main.js&test.js css/index.css index.html build.js copy requirejs目录下的r.js到根目录 创建导出目录:one 测试目录创建完成! index.html <!DOCTYPE html> <

用 requirejs 的 R.js 打包css + js

最近用requirejs做了一个项目,实现了模块化的开发方式,通过声明将依赖引入,有效的管理了各个模块之间的依赖关系,开发也有条不紊的进行,但是最近要上线,就面临着一个打包的问题,因为js模块化,导致js文件很多,所以要将其压缩成一个文件. 一.压缩js 1.首先你要先有nodejs环境,没有可以去装一个 2.你得下载R.js 3.新建一个build.js ({ baseUrl: "../src/main/webapp/static/js", name: "app"

使用r.js打包js文件

之前的文章里有介绍requirejs的基本使用方法,但是直接使用requirejs会暴露出一个问题,就是当模块过多的时候,requirejs就会引入许多js文件,大大的增加了请求数,那么有的朋友就要说了,我们自己压缩那些模块文件不就行了么,其实仔细想想这样到底行不行,答案是行!但是很麻烦: 1. 首先一般我们写模块时不会去定义模块名字,因为模块名字默认就是js文件名字,如果自己手动去写模块名,就增加了额外的工作量. 2. 加载顺序的问题,自己手动压缩,就要严格把控好模块的先后顺序(特别是有jqu

r.js 打包压缩文件（依赖require）

r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求. 要使用r.js需下载r.js文件( 点我下载 ),将其放到你的项目根目录:还需要安装nodeJS(点我下载),以便通过命令行来执行r.js功能. 下面是我项目 幸福来敲门的目录结构.从index.html结构的data-mian可以看出模块的入口是app.js. app.js里面是这样一小段代码: 注释

requirejs r.js 打包报错paths fallback not supported in optimizer please provide a build config path override for jquery

错误原因: 改为:

requireJS的优化工具 ---- r.js

requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build.js ({ appDir: './', //项目根目录 out: 'main-build.js', //输出文件名 dir: './outdir', //输出目录,全部文件打包后要放入的文件夹(如果没有会自动新建的) /* 有了dir,就不能使用out配置项了,你在编译时它有非常明确的提示 */

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

在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发布,性能优化,工程化管理都有密切的关系,这么重要的事情,在JavaScript大行其道的今天,不可能没有成熟的解决方案,所以从我的实践经验出发,从模块化讲到工程化,分享一下自己的经验. 这篇文章主要是讲require.js和r.js在项目中的使用,不会涉及到工程化问题,对此熟悉的看官可以略过此文.对

使用r.js来打包模块化的javascript文件

前面的话 r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.本文将详细介绍r.js 简单打包 [项目结构] 以一个简单的例子来说明r.js的使用.该项目名称为'demo',在js目录下包含s1.js和s2.js两个文件,使用requirejs进行模块化,内容如下 //s1.js define(function (){ return 1; }) /

r.js压缩打包（require + backbone）项目开发文件

最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开发文件夹 build.js压缩打包配置文件,文件名可随意 ({ appDir : './', //基于build,根目录 baseUrl : './project', //基于appDir,项目目录 dir : './pro