requireJs和r.js压缩工具

news/2024/5/17 18:23:45

上面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="js/main-build" src="js/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: {  
      'underscore':{
        exports: '_'
      },

      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }

    }

})
require(['one','sub/three',jquery,_,Backbone],function(one,three){
   alert(one+three);
});

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。

 

代码地址:https://github.com/lianbinghua/require

转载于:https://www.cnblogs.com/xiaotaiyang/p/5530854.html


http://www.niftyadmin.cn/n/4051106.html

相关文章

遥感卫星快视设备的设计与实现

遥感卫星快视设备的设计与实现 作者&#xff1a;孙磊, 安建平, 卜祥元 遥感卫星在进行地面信源测试时&#xff0c;需要对测试信源进行高速持续大容量记录&#xff0c;以达到测试卫星信源的目的。在一些诸如雷达信号处理、图像通信、高速A/D数据采集等通信和测量领域&#xff0c…

u盘无法格式化怎么办?数据丢失这样恢复

u盘无法格式化怎么办&#xff1f;u盘是大家常用到的一款存储工具&#xff0c;但经常使用也会造成u盘损坏&#xff0c;常见的问题就是u盘无法格式化&#xff0c;这种情况下我们该如何解决呢&#xff1f;数据是否还能恢复呢&#xff1f;下面就一起来了解下u盘修复的方法。 u盘无法…

美化select的jquery插件

自己写的一个美化select插件&#xff0c;浏览器自带的实在太丑&#xff0c;还不能用css自定义。 插件主要原理是隐藏原生的select控件&#xff0c;支持select上设置change事件。 脚本 1 /*2 * iSelect 3 * 自定义select控件4 */5 (function ($) {6 $.fn.iSelect function …

SUSE linux 使用LVM安装系统和管理

引出 在我们安装好linux系统后会发现在需要修改磁盘分区的时候会比较困难,系统安装的/目录的文件系统要更改基本不太可能&#xff0c;其他目录如/home目录也比较困难。但是系统安装时要是采用的LVM管理的方式安装的话就会截然不通。 一、首先普及下LVM的基础知识 LVM&#xff0…

第十二节,运算符

1算数运算 运算符 描述 示例 加&#xff0c;两个对象相加 ab输出结果30 - 减&#xff0c;得到负数&#xff0c;或者一个数减去另一个数 a-b输出结果-10 * 乘&#xff0c;两个数相乘或是返回一个被重复若干次的字符串 a*b输出结果200 / 除&#xf…

hiho_1058_combination_lock

题目大意 给定N个字符&#xff0c;范围为A-Z&#xff0c;编号为1-N&#xff0c;对该字符序列进行M个操作&#xff0c;操作有4中类型&#xff1a; &#xff08;1&#xff09;CMD 1 i j X 将[i, j]区间内的字符均变为X &#xff08;2&#xff09;CMD 2 i j K 将[i, j]区间…

团队项目:第二次冲刺站立会议02

团队项目&#xff1a;第二次冲刺站立会议02 一.昨天干了什么搜集各银行业务的相关资料&#xff0c;注意事项。二.今天准备干什么整理关于银行业务的相关资料&#xff0c;列出所要内容。三.遇到的困难整理资料没什么困难。转载于:https://www.cnblogs.com/kongyuhang/p/5538607.…

回收站删除的文件怎么恢复?清空也能恢复数据

回收站删除的文件怎么恢复&#xff1f;在平时使用电脑的过程中&#xff0c;我们都会时不时将无用的文件清理&#xff0c;甚至将回收站再次清空以节省空间&#xff0c;但有时候难免会发生这样的情况&#xff0c;就是删除的文件还需要再次用到&#xff0c;那怎么从清空的回收站中…