RequireJS 打包工具
r.js
是RequireJS
的一个附产品,支持在 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
就会:
- 把配置信息的
modules
下的所有模块建立好完整的依赖关系,再把相应的文件打包合并到dir
目录 - 把所有的
css
文件中,使用@import
语法的文件自动打包合并到dir
目录 - 把其他文件赋值到
dir
目录,比如图片、附件等
适合老旧传统项目使用的api
modules[i].include
modules: [
{
name: "main",
include: ["a", "b"]
}
]
这里include
字段提供了"强制建立依赖关系"的功能,也就是说,即使在 main.js
的代码里没有依赖 a.js
和 b.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.css
和b.css
文件
.a-class {
font-size: 16px;
color: #000;
}
.b-class {
font-size: 20px;
color: red;
}
打包完的main.js
;打包时会把a.js
和b.js
插入到main.js
的前面,即使在main.js
的代码里没有依赖它们
这是因为在打包配置文件config.js
里配置了 modules[i].include
属性
alert("a module"),alert("b module");
RequireJS 打包工具的更多相关文章
- 模块化管理工具兼打包工具 webpack
webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Atitit.项目修改补丁打包工具 使用说明
Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...
- Webpack:前端资源模块化管理和打包工具
一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...
- Winform打包工具SetupFactory 9 的使用
写了个WinForm的小程序..以前没打过包..只是直接把Bin里的东西复制出来使用..自己使用是足够.但是发给别人毕竟不太好看(不牛逼)..所以就想着打包.. Vs2012自带的有打包的功能..相信 ...
- 【Cocos2d-Js基础教学(5)资源打包工具的使用及资源的异步加载处理】
TexturePacker是纹理资源打包工具,支持Cocos2dx的游戏资源打包. 如果用过的同学可以直接看下面的资源的异步加载处理 首先为什么用TexturePacker? 1,节省图片资源实际大小 ...
- 用InstallShield 打包工具 打 Win32 程序 (depends.exe 用看程序都依赖了哪些dll)
InstallShield 打包工具 1. 转载:http://blog.csdn.net/zhang_xinxiu/article/details/9099757 2. 转载:http://www. ...
- Inno Setup 打包工具总结
Inno Setup 打包工具总结 分类: Install Setup 2013-02-02 15:44 2386人阅读 评论(0) 收藏 举报 最近打包用到了Inno setup,在这个过程中容易犯 ...
- 把docker当做绿色打包工具
如题,我只是把docker当成绿色版的各种环境的集成打包工具了 用到了docker的--net=host模式,这个暂时在mac下是有问题的,linux下正常使用,具体docker的网络模式参考这里,此 ...
随机推荐
- virtualBox里Ubuntu设置静态IP
1.先将网络设置为桥接模式 2.打开虚拟机,进入界面,点击编辑 3.设置IP,ipconfig/all查看物理机IP,虚拟机要与本机在同一网段 然后断开重新连接就可以上网了
- Mysql备份还有这么多套路,还不了解下?
逻辑备份和物理备份 逻辑备份 逻辑备份用于备份数据库的结构(CREAET DATABASE.CREATE TABLE)和数据(INSERT),这种备份类型适合数据量小.跨SQL服务器.需要修改数据等场 ...
- C语言|博客作业05
这个作业属于哪个课程 C语言程序设计II 这个作业的要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-1/homework/9825 我在这个课程的 ...
- 在Windows Server 2019通过Docker Compose部署Asp.Net Core
一.安装Docker Enterprise 安装文档是: https://docs.docker.com/install/windows/docker-ee/ 安装完成后,如下图 二.首先,拉取一个W ...
- Eclipse设置Working Set管理项目和detach合并分离窗口
当项目多了的时候,使用Working Set分组管理项目很有必要了,不然一大推项目在一起 找起来麻烦,看起来也难受~ 所以根据给项目不同分类就很有必要了. 之前myeclipse设置了,今天装了一 ...
- Spring Data Jpa的四种查询方式
一.调用接口的方式 1.基本介绍 通过调用接口里的方法查询,需要我们自定义的接口继承Spring Data Jpa规定的接口 public interface UserDao extends JpaR ...
- 解决Debina系统自动更新软件包的问题
不知从何时开始,我的电脑每天开机连接上网络之后,不断的在下载数据,状态栏显示网速达到每秒1到2兆.开始我还不太在意,不过后来由于带宽全部被这种莫名其奥妙的下载占据了,我连网页都无否正常浏览了,所以我决 ...
- sortColors
Given an array with n objects colored red, white or blue, sort them in-place so that objects of the ...
- 痞子衡嵌入式:恩智浦i.MX RTxxx系列MCU启动那些事(2)- Boot配置(ISP_Pin, OTP)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Boot配置. 在上一篇文章 Boot简介 里痞子衡为大家介绍了Boot基本原理以及i.MXRTx ...
- 【开发工具 - MySQL】之不能插入中文的问题
新安装的MySQL数据库,在安装的时候设置了字体为UTF8,但在使用insert语句插入中文的时候还是会报错. 具体解决方法:在MySQL控制台中输入以下设置代码: SET character_set ...