云平台项目--学习经验--打包压缩工具requirejs

时间 2020-04-03

标签平台项目学习经验打包压缩工具 requirejs 栏目 JavaScript 繁體版

原文原文链接

requirejs是一个JavaScript模块加载器。适合在浏览器中国使用，也能够在其余脚本环境使用，它鼓励了代码的模块化。使用RequireJS加载模块化脚本将提升代码的加载速度和质量。
如何加载RequireJS呢？
　　假如项目中的JS都放在一个"script"目录下，例若有个index.html和一些script,则该布局以下:
　　项目目录:
　　·index.html
　　·scripts/
　　　　·main.js
　　　　·helper/
　　　　　　·until.js
添加require.js到scripts目录下，则该目录以下:
　　·index.html
　　·scripts/
　　　　·main.js
　　　　·require.js
　　　　·helper/
　　　　　　·until.js
为了充分利用该优化工具，可将全部的scripts放到HTML外面，而后只引用RequireJS来请求加载其余script：
能够只写一个main.js,经过它来加载你所须要运行的scripts,这能够保证你所须要的Scripts都是在这里加载的。
例如:
<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<title>REQUIREJS</title>
　　　　　　<script data-main="scripts/main" src="scripts/require.js"></script>
　　　　</head>
　　　　<body>
　　　　　　<h1>test</h1>
　　　　</body>
</html>css

RequireJS以一个相对baseUrl的地址来加载全部代码，页面顶层<script>标签含有一个特殊的属性data-main,require.js用它来启动脚本加载过程，而baseUrl通常设置与该属性相一致的目录。下列示例中展现了baseUrl的设置:
<script data-main="scripts/main.js" src="scripts/require.js"></script>
baseUrl能够经过RequireJS config手动设置。若是没有显式指定config以及data-main,默认boseUrl包含RequireJS那个HTML页面所属的目录。html

实际应用中，可将项目库和第三方库分开，为一扁平结构。
如：
　　·index.html
　　·js/
　　·app/ *项目库*
　　　　·sub.js
　　·lib/ *第三方库*
　　　　·jquery.js
　　　　·canvas.js
　　·app.jsjquery

则index.html:
<script data-main="js/app.js" src="js/require.js"></script>web

app.js:
requirejs.config({
　　baseUrl: 'js/lib',
　　paths: {
　　app: '../app'
　　}
});
requirejs(['jquery', 'canvas', 'app/sub'],
function ($, canvas, sub) {canvas

});浏览器

在实际项目中，是这样的：
·web/
　　·default.html
　　·js/
　　　　·第三方库
　　·module_js/
　　　　·原生js
　　　　·main.js
在main.js中，首部写法以下：
require(["Log","Play"....],function(doc,inc,Log....){内容函数}); //注意没有后缀app

而在default.html中，首部写法以下:
经过定义一个require:
var require = {
　　baseUrl: "module_js", //baseUrl
　　urlArgs: '1.8.4',
　　map:{
　　　　"*":{
　　　　　　css:"../js/css"
　　　　　　}
　　　　}　　
};
require.paths={
"jasmine":"../spec/jasmine-2.5.2/jasmine",
"jasmine-html":"../spec/jasmine-2.5.2/jasmine-html",
"runJasmine":"../spec/test/run",
"jquery":"../js/jquery.min",
....................
};模块化