雲平臺項目--學習經驗--打包壓縮工具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",
....................
};模塊化