r.jsRequireJS的一个附产品,支持在 NodeJS环境下运行AMD程序,并且其包含了一个名为RequireJS Optimizer的工具,可以为项目完成合并脚本等优化操作

RequireJS Optimizer常规用法

写好一个配置文件, 比如 config.js,常用属性有:

({
    // 程序的根路径
    appDir: "xxx",
    // 脚本的根路径
    // 相对于程序的根路径
    baseUrl: "xxx",
    // 打包输出到的路径
    dir: "xxx",
    // 需要打包合并的js模块,数组形式,可以有多个
    // name 以 baseUrl 为相对路径,无需写 .js 后缀
    // 比如 main 依赖 a 和 b,a 又依赖 c,则 {name: 'main'} 会把 c.js a.js b.js main.js 合并成一个 main.js
    modules: [
        {
            name: "main"
        }
        ...
    ],
    // 通过正则以文件名排除文件/文件夹
    // 比如当前的正则表示排除 .svn、.git 这类的隐藏文件
    fileExclusionRegExp: /^\./
})

运行node命令

node r.js -o config.js

这时 RequireJS Optimizer 就会:

  1. 把配置信息的 modules下的所有模块建立好完整的依赖关系,再把相应的文件打包合并到 dir 目录
  2. 把所有的 css文件中,使用 @import 语法的文件自动打包合并到 dir目录
  3. 把其他文件赋值到 dir 目录,比如图片、附件等

适合老旧传统项目使用的api

modules[i].include
modules: [
    {
        name: "main",
        include: ["a", "b"]
    }
]

这里include字段提供了"强制建立依赖关系"的功能,也就是说,即使在 main.js 的代码里没有依赖 a.jsb.js,它们也会在合并代码的时候插入到 main.js的前面,这种打包方式非常适合传统老旧项目

two small demos using r.js to pack files

demo one:给使用`AMD`模块化开发方式的项目打包

目录结构

|——build
    |——config.js
    |——r.js
|——js
    |——moduleA.js
    |——moduleB.js
    |——moduleC.js
    |——main.js
    |——require.min.js
|——index.html

文件详情

index.html

<!-- data-main指向总的文件入口, 只能有一个入口文件 -->
<script src="js/require.min.js" data-main="js/main.js"></script>

moduleA.js

define(function () {
    return {
        a: 5
    }
});

moduleB.js

define(function () {
    return {
        b: 10
    }
});

moduleC.js

define([
    'moduleA',
    'moduleB'
], function(moduleA, moduleB) {
    'use strict';
    let a = moduleA.a;
    let b = moduleB.b;     function add (x, y) {
        return x + y;
    }     function init() {
        console.log('app init');
        console.log('the result is: ' + add(a, b));
    }     return {
        init: init
    }
});

main.js

// don't use moduleA.js or js/moduleA.js here
require(["moduleC"], function (moduleC) {
    moduleC.init();
})

打包配置文件config.js

({
    appDir: '../',
    baseUrl: './js',
    dir: "../dist",
    keepBuildDir: false,
    // 打包结果优化; 压缩等
    optimize: "none",
    skipModuleInsertion: true,
    removeCombined: true,
    modules: [
        {
            name: "main"
        }
    ],
    fileExclusionRegExp: /^(\.|build|dist|README)/,
})

运行打包命令

node r.js -o config.js

打包结果

dist 目录结构

|——js
    |——main.js
    |——require.min.js
|——build.txt
|——index.html

打包完的 main.js;自动分析依赖,并将所有依赖到的文件统一打包到 main.js

define('moduleA',[],function () {
    return {
        a: 5
    }
}); define('moduleB',[],function () {
    return {
        b: 10
    }
}); define('moduleC',[
    'moduleA',
    'moduleB'
], function(moduleA, moduleB) {     let a = moduleA.a;
    let b = moduleB.b;     function add (x, y) {
        return x + y;
    }     function init() {
        console.log('app init');
        console.log('the result is: ' + add(a, b));
    }     return {
        init: init
    }
}); // don't use moduleA.js or js/moduleA.js here
require(["moduleC"], function (moduleC) {
    moduleC.init();
});
demo two:给传统旧项目打包

目录结构

|——build
    |——config.js
    |——r.js
|——css
    |——a.css
    |——b.css
    |——main.css
|——image
    |——a.jpg
|——js
    |——a.js
    |——b.js
    |——main.js
|——index.html

文件详情

index.html

    ...
<link rel="stylesheet" href="css/main.css">
    ...
<div><img src="data:images/a.jpg" alt=""></div>
    ...
<script src="js/main.js"></script>

mian.css

@import url(a.css)
@import url(b.css)

a.js

alert('a')

b.js

alert('b')

main.js

// ...

打包配置文件config.js

({
    // 程序的根路径
    appDir: "../",
    // 脚本的根路径
    // 若appDir值未指定,模块则相对build文件所在目录。
    // 若appDir值已指定,模块根目录baseUrl则相对appDir。
    // 相对于程序的根路径
    baseUrl: "./js",
    // 打包输出到的路径
    dir: "../dist",
    // 在 RequireJS 2.0.2 中,输出目录的所有资源会在 build 前被删除
    // 值为 true 时 rebuild 更快,但某些特殊情景下可能会出现无法预料的异常
    keepBuildDir: false,
    // RequireJS Optimizer 有个很智能的功能, 就是为没有写明 define(...) 函数
    // 的模块代码自动将其放入 define(...) 之中
    // 如果我们指定如下参数, 那么上述的处理将会被取消
    skipModuleInsertion: true,
    // If set to true, any files that were combined into a build layer will be
    // removed from the output folder.
    // 打包输出的文件夹中只留打包后的js、css
    removeCombined: true,
    // 需要打包合并的js模块, 数组形式, 可以有多个
    // name以basrUrl为相对路径, 无需写.js后缀
    // include字段提供了"强制建立依赖关系"的功能, 也就是说, 即使在main.js的代码里
    // 没有依赖 a.js 和 b.js, 它们也会在合并代码的时候插入到 main.js 的前面
    modules: [
        {
            name: "main",
            include: ["a", "b"]
        }
    ],
    // 通过正则以文件名排除文件/文件夹
    // ex 排除 .svn、.git 这类隐藏文件
    fileExclusionRegExp: /^(\.|build|dist|ignore|README)/,
    // onBuildRead 这个参数可以定义一个函数, 在处理每个 js 文件之前,
    // 会先对文件的文本内容进行预处理
    // 比如下面, 就是把 main.js 里打包前的代码全部清除(注释外的代码, 注释自动会清除)
    onBuildRead: function (moduleName, path, contents) {
        if (moduleName === 'main') {
            console.log('hello')
            contents = '/* empty code */';
            // return contents.replace(/foo/g, "bar");
        }
        return contents
    }
})

运行打包命令

node r.js -o config.js

打包结果

目录结构

|——css
    |——main.css
|——image
    |——a.jpg
|——js
    |——main.js
|——build.txt
|——index.html

打包完的 main.css;打包时自动合并a.cssb.css文件

.a-class {
    font-size: 16px;
    color: #000;
}
.b-class {
    font-size: 20px;
    color: red;
}

打包完的main.js;打包时会把a.jsb.js插入到main.js的前面,即使在main.js的代码里没有依赖它们

这是因为在打包配置文件config.js里配置了 modules[i].include 属性

alert("a module"),alert("b module");

两个demo的地址

RequireJS 打包工具的更多相关文章

  1. 模块化管理工具兼打包工具 webpack

    webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...

  2. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  3. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  4. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  5. Winform打包工具SetupFactory 9 的使用

    写了个WinForm的小程序..以前没打过包..只是直接把Bin里的东西复制出来使用..自己使用是足够.但是发给别人毕竟不太好看(不牛逼)..所以就想着打包.. Vs2012自带的有打包的功能..相信 ...

  6. 【Cocos2d-Js基础教学(5)资源打包工具的使用及资源的异步加载处理】

    TexturePacker是纹理资源打包工具,支持Cocos2dx的游戏资源打包. 如果用过的同学可以直接看下面的资源的异步加载处理 首先为什么用TexturePacker? 1,节省图片资源实际大小 ...

  7. 用InstallShield 打包工具 打 Win32 程序 (depends.exe 用看程序都依赖了哪些dll)

    InstallShield 打包工具 1. 转载:http://blog.csdn.net/zhang_xinxiu/article/details/9099757 2. 转载:http://www. ...

  8. Inno Setup 打包工具总结

    Inno Setup 打包工具总结 分类: Install Setup 2013-02-02 15:44 2386人阅读 评论(0) 收藏 举报 最近打包用到了Inno setup,在这个过程中容易犯 ...

  9. 把docker当做绿色打包工具

    如题,我只是把docker当成绿色版的各种环境的集成打包工具了 用到了docker的--net=host模式,这个暂时在mac下是有问题的,linux下正常使用,具体docker的网络模式参考这里,此 ...

随机推荐

  1. virtualBox里Ubuntu设置静态IP

    1.先将网络设置为桥接模式 2.打开虚拟机,进入界面,点击编辑 3.设置IP,ipconfig/all查看物理机IP,虚拟机要与本机在同一网段 然后断开重新连接就可以上网了

  2. Mysql备份还有这么多套路,还不了解下?

    逻辑备份和物理备份 逻辑备份 逻辑备份用于备份数据库的结构(CREAET DATABASE.CREATE TABLE)和数据(INSERT),这种备份类型适合数据量小.跨SQL服务器.需要修改数据等场 ...

  3. C语言|博客作业05

    这个作业属于哪个课程 C语言程序设计II 这个作业的要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/9825 我在这个课程的 ...

  4. 在Windows Server 2019通过Docker Compose部署Asp.Net Core

    一.安装Docker Enterprise 安装文档是: https://docs.docker.com/install/windows/docker-ee/ 安装完成后,如下图 二.首先,拉取一个W ...

  5. Eclipse设置Working Set管理项目和detach合并分离窗口

    当项目多了的时候,使用Working Set分组管理项目很有必要了,不然一大推项目在一起 找起来麻烦,看起来也难受~ ​ 所以根据给项目不同分类就很有必要了. 之前myeclipse设置了,今天装了一 ...

  6. Spring Data Jpa的四种查询方式

    一.调用接口的方式 1.基本介绍 通过调用接口里的方法查询,需要我们自定义的接口继承Spring Data Jpa规定的接口 public interface UserDao extends JpaR ...

  7. 解决Debina系统自动更新软件包的问题

    不知从何时开始,我的电脑每天开机连接上网络之后,不断的在下载数据,状态栏显示网速达到每秒1到2兆.开始我还不太在意,不过后来由于带宽全部被这种莫名其奥妙的下载占据了,我连网页都无否正常浏览了,所以我决 ...

  8. sortColors

    Given an array with n objects colored red, white or blue, sort them in-place so that objects of the ...

  9. 痞子衡嵌入式:恩智浦i.MX RTxxx系列MCU启动那些事(2)- Boot配置(ISP_Pin, OTP)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Boot配置. 在上一篇文章 Boot简介 里痞子衡为大家介绍了Boot基本原理以及i.MXRTx ...

  10. 【开发工具 - MySQL】之不能插入中文的问题

    新安装的MySQL数据库,在安装的时候设置了字体为UTF8,但在使用insert语句插入中文的时候还是会报错. 具体解决方法:在MySQL控制台中输入以下设置代码: SET character_set ...