我想優化我的要求JS項目到單個文件。 我走過了多個教程,但沒有一個似乎能正常工作。要求JS - r.js優化 - 如何做到這一點?
我有以下文件結構:
scripts/
build/
r.js
build.js
common/
misc.js
slider.js
library/
jquery.min.js
jquery.colorbox.min.js
jquery.scrollTo.min.js
...
mobile/
app.js
catalogue.js
car-images.js
...
web/
app.js
catalogue.js
car-images.js
...
index.html
我需要創建2個文件web.app.js
和mobile.app.js
。 經過多次嘗試後,我只管理了每個文件夾中的app.js
,但沒有它的依賴關係。
結果應該是一個文件,包含common
,library
和web
/mobile
目錄中的所有內容,這取決於app.js我嘗試編譯。
這裏是如何app.js
樣子(web
和mobile
是相似的):
requirejs.config({
"paths": {
'jquery': [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min',
'../library/jquery.min'
],
'colorbox': [
'//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox-min',
'../library/jquery.colorbox-min'
],
'colorbox-he': [
'//cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/i18n/jquery.colorbox-he.min',
'../library/jquery.colorbox-he.min'
],
'scrollTo': [
'//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.1/jquery.scrollTo.min',
'../library/jquery.scrollTo.min'
],
'misc': '../common/misc',
'slider': '../common/slider'
},
"map": {
'*': {
'colorbox': 'colorbox-he'
},
'colorbox-he': {
'colorbox': 'colorbox'
}
},
"shim": {
'scrollTo': {
'deps': ['jquery'],
'exports': 'jQuery.fn.scrollTo'
},
'colorbox': {
'deps': ['jquery'],
'exports': 'jQuery.fn.colorbox'
},
'colorbox-he': ['colorbox'],
'misc': ['jquery', 'scrollTo'],
'car-images': ['jquery', 'colorbox'],
}
});
if (typeof require_modules == 'object') {
require_modules.push('misc')
} else {
var require_modules = ['misc']
}
require(require_modules);
這裏是所使用的配置:
({
baseUrl: "../web",
name: "app",
out: "app-built.js"
})
不知道如何對不對?由於多個文件和請求,加載時間相當長。
在此先感謝!
你的問題應該包括你傳遞給'r.js'配置文件。 – Louis
@Louis是的,你是對的。我更新了答案。他們非常簡單,所以我想也許沒有必要。 –