r.js打包
久闻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给我
r.js打包的更多相关文章
- requirejs 使用实例r.js打包
在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...
- r.js打包注意事项 r.js打包 这个是配合require.js打包的
这个./代表的是当前文件的父目录....打包的资源一定要在这个父目录中下面才行,,,,一定一定,要放在这个目录一下才能被正确找到. 不然只是copy了一份一模一样的文件夹和文件过去,并不会处理压缩啥的 ...
- 转载 r.js打包经验
例子1 先是HTML页面 <!DOCTYPE html> <html> <head> <title>My App</tit ...
- requirejs r.js 打包报错paths fallback not supported in optimizer please provide a build config path override for jquery
错误原因: 改为:
- requirejs原理深究以及r.js和gulp的打包【转】
转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...
- requirejs 多页面，多js 打包代码，requirejs多对多打包【收藏】
这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...
- requirejs 多页面，多js 打包代码，requirejs多对多打包
这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...
- requireJS的优化工具 ---- r.js
requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build ...
- 转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)
这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...
随机推荐
- winform datagridview 不显示默认第一列 不显示未绑定列 数据源发生改变时自动更新 (转)
不显示带星号的第一列: datagridview属性框中将 RowHeadersVisiber 设置为 false 不显示未绑定列: datagridview有一个属性是 AutoGenerateC ...
- man page ，info page 和/usr/share/doc/整理自鸟哥
- 比如查看date指令 - 命令:vbird@www ~]$ man date - 返回示例(部分):DATE(1) User Commands DATE(1) - 部分释义(注释2): ...
- 关于String str =new String("abc")和 String str = "abc"的比较--转
原文地址:https://www.cnblogs.com/OnlyCT/p/5433410.html String是一个非常常用的类,应该深入的去了解String 如: String str =new ...
- [转]Windows服务“允许服务与桌面交互”的使用和修改方法
上一篇文章是纯 C# 代码的形式勾上 “允许服务与桌面交互” 选项的 本文转载自:http://blog.csdn.net/lanruoshui/article/details/4756408 描述: ...
- 如何在CentOS中添加Swap
1.检查 Swap 空间 在设置 Swap 文件之前,有必要先检查一下系统里有没有既存的 Swap 文件.运行以下命令: 1 swapon -s 如果返回的信息概要是空的,则表示 Swap 文件不存在 ...
- Win10巧用自带输入法轻松打出特殊字符
给电脑输入信息时,如果要用上键盘上没有的特殊符号,那就为难了.其实,在Win10中,自带的微软拼音就能让你轻松输入键盘上没有的符号.下面来看看Win10如何输入特殊符号. 微软拼音不但中文输入智能化做 ...
- javascript的节点的概念
<html> <head> <title></title> </head> <body> </body> </ ...
- MIT提出精细到头发丝的语义分割技术，打造效果惊艳的特效电影
来自 MIT CSAIL 的研究人员开发了一种精细程度远超传统语义分割方法的「语义软分割」技术,连头发都能清晰地在分割掩码中呈现.在对比实验中,他们的结果远远优于 PSPNet.Mask R-CNN. ...
- FIO read测试结果偏离
工作中发现一个fio问题,测试组测试出来的数据read速度一个是17.0G/s,一个是13.2G/s.要知道我后台只有24块7.2k RPM的机械硬盘啊!怎么也不可能有这样的速度. 回家之后我模拟了实 ...
- python之路day03
1 复习计算机基础 计算机基础我们讲到完整的计算机系统包括了:应用程序,操作系统,硬件三部分.那么硬件又分为:cpu,内,和硬盘. 对于用户来说我们操作计算机是通过应用程序来间接控制计算机.当我们打 ...