requireJs和r.js压缩工具

上面release是执行命令 node r.js -o build.js 生成的,需要切换到目录require/tools下面,也就是 有r.js和build.js的目录,才能执行命令

代码目录如上:

main.html代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello RequireJS</title>
    </head>
    <body>
        <h1>Hello RequireJS</h1>

        <script type="text/javascript" src="js/lib/require.js"></script>

        <!-- main.js:requireJS 配置信息 -->
        <script type="text/javascript" src="js/config.js"></script>
        <!-- <script type="text/javascript" src="js/combine.js"></script> -->

        <script type="text/javascript">          /*如果没有配置信息,加载one,two模块,要找到他们的存放路径*/
          /*  require(["./js/mod/one", "./js/mod/two"], function (one, two) {
                console.log(‘加载模块:‘, one.name, two.name );
                console.log("bootstrap the application");
            });*/
            require(["one", "two"], function (one, two) {
                console.log(‘加载模块:‘, one.name, two.name );
                console.log("bootstrap the application");
            });

        </script>
    </body>
</html>

config.js代码如下,配置信息,便于 require引入这些模块 one,two,three,如上代码

// requireJS的简单配置,更详细的配置信息请看 http://requirejs.org/docs/api.html#config
requirejs.config({
    baseUrl: "./js", //相对于当前 Html的路径

    paths: {
        one: "mod/one",
        two: "mod/two",
        three: "mod/three"
    }
});

one模块代码:

define(function(){
    return {name:"one"}
});

two模块代码:其中two模块引入了three模块

define(function(require){
    /*var three = require(‘./three‘);*/
    var three = require(‘three‘);

    console.log(‘加载模块:‘+three.name);

    return {name:"two"}
});

three模块代码:

define(function(){
    return {name:"three"}
});

build.js是r.js压缩代码的依据,代码如下:

({
    appDir:"../src",
    dir:"../release",
    mainConfigFile:"../src/js/config.js",
    paths:{
        one:"mod/one",
        two:"mod/two",
        three:"mod/three"
    },
    modules:[{
        name:"combine",
        include:[
            ‘one‘,
            ‘two‘
        ]
    }],
    optimize:"uglify" 

})

     appDir

  应用程序的最顶层目录。可选的,如果设置了的话,r.js 会认为脚本在这个路径的子目录中,应用程序的文件都会被拷贝到输出目录(dir 定义的路径)。如果不设置,则使用下面的 baseUrl 路径。

  baseUrl

  默认情况下,所有的模块都是相对于这个路径的。如果没有设置,则模块的加载是相对于 build 文件所在的目录。另外,如果设置了appDir,那么 baseUrl 应该定义为相对于 appDir 的路径。

  dir

  输出目录的路径。如果不设置,则默认为和 build 文件同级的 build 目录。

  optimize

  JavaScript 代码优化方式。可设置的值:

  • "uglify:使用 UglifyJS 压缩代码,默认值;
  • "uglify2":使用 2.1.2+ 版本进行压缩;
  • "closure": 使用 Google‘s Closure Compiler 进行压缩合并,需要 Java 环境;
  • "closure.keepLines":使用 Closure Compiler 进行压缩合并并保留换行;
  • "none":不做压缩合并;

  optimizeCss

  CSS 代码优化方式,可选的值有:

  • "standard":标准的压缩方式;
  • "standard.keepLines":保留换行;
  • "standard.keepComments":保留注释;
  • "standard.keepComments.keepLines":保留换行;
  • "none":不压缩;

  mainConfigFile

  如果不想重复定义的话,可以使用这个参数配置 RequireJS 的配置文件路径。

  removeCombined

  删除之前压缩合并的文件,默认值 false。

  fileExclusionRegExp

  要排除的文件的正则匹配的表达式。

  modules

  定义要被优化的模块数组。每一项是模块优化的配置,常用的几个参数如下:

    name:模块名;

    create:如果不存在,是否创建。默认 false;

    include:额外引入的模块,和 name 定义的模块一起压缩合并;

    exclude:要排除的模块。有些模块有公共的依赖模块,在合并的时候每个都会压缩进去,例如一些基础库。使用 exclude 就可以把这些模块在压缩在一个更早之前加载的模块中,其它模块不用重复引入。

代码目录如下

main-build.js,production都是运行 node r.js -o build.js生成的,需要切换到目录test/develop下面,也就是 有r.js和build.js的目录,才能执行命令

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

data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。

build.js 如下:out是压缩为一个.js文件,dir是将本地代码,重新复制一份代码,作为上线代码,out和dir不能同时出现,同时使用会报冲突。

({
    baseUrl:‘.‘,
    name:‘main‘,
    paths:{jquery:‘jquery/jquery-1.11.0.min‘},
    out:‘main-build.js‘
    /*dir:‘../production‘*/
})

main.js 配置:方便require加载模块

理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢?

回答是可以的。

这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。

举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。

require.config({
    paths:{
        jquery:‘jquery/jquery-1.11.0.min‘
    },

     shim: {

    }

})
require([‘one‘,‘sub/three‘,‘jquery‘],function(one,three){
   alert(one+three);
});
时间: 2024-10-08 18:02:01

requireJs和r.js压缩工具的相关文章

requirejs和r.js的心得

requirejs的GitHub:requirejs r.js的GitHub:r.js grunt-contrib-requirejs的GitHub:grunt-contrib-requirejs requirejs的一个典型配置,main.js require.config({ shim: { '$': { exports: 'Zepto' //zepto.js里面暴漏的全局变量 }, '_': { exports: '_' }, 'B': { deps: [ '_' //依赖关系 ], ex

用 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"

使用requirejs的r.js压缩碰到的问题

1.require模块里,再去require模块,依赖分析不到,r.js不会合并.解决办法:还是放在require([])的这个数组里. 2. r.js也不会识别jquery.min.js.解决办法:把jquery.min.js改名成jquery.js.

requirejs实验002. r.js合并文件. 初体验.

requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrburke/r.js/blob/master/build/example.build.js 这里罗列了所有的优化参数. 我是在win7上使用r.js的. 安装使用的是npm ->  npm install -g requirejs  安装在全局,更合适,方便在任何地方使用. windows上使用r.js

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配置项了,你在编译时它有非常明确的提示 */

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> <

如何应用r.js对requirejs下的js代码合并

1.在根目录新建build.js ({ baseUrl:'js', paths:{ jquery:'static/jquery-1.10.2.min', underscore:'static/underscore', bootstrap:'static/bootstrap' }, shim:{ 'bootstrap':['jquery'] }, name:'main', out:'js/main-build.js' }) 2.cmd下找到项目所在目录 执行 node r.js -o build.

RequireJS模块化后JS压缩合并

使用RequireJS模块化后代码被拆分成多个JS文件了,在部署生产环境需要压缩合并,RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩.r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包. r.js的压缩工具使用UglifyJS或Closure Compiler.默认使用UglifyJS(jQuery也是使用它压缩).此外r.js需要node.js环境,当然它也可以运行在Java环境中如Rhino.JAVA环境使用Ant构建可以参考另外一篇RequireJ

使用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; }) /