2013-02-04 32 views
1

在RequireJS例子,它表明你可以引用app.js(或任何你要撥打的啓動文件),從腳本標籤,像這樣:RequireJS優化器是否在沒有「app.js」和依賴於內聯模塊的模塊上工作?

<script data-main="js/app.js" src="js/require.js"></script> 

對於超出了我的控制,我可以考慮不要這樣做。在模板層中有幾個動態變量需要保留。所以,我創建了一個其他模塊可以讀取的內聯「配置」模塊。

<script type="text/javascript"> 
     define('config', function() { 
      return { 
       markup_id: { 
        "content": "search", 
        "page": "index", 
        "media": "mobile" 
       }, 
       page_context: { 
        "siteconfig": { 
         "mobile_video_player_id": /* */, 
         "mobile_video_player_key": /* */, 
         "mobile_ad_site": /* */, 
         "omniture_mobile_env": /* */, 
         "searchserver": /* */,    
        }, 
        "omniture": { 
         "gn": /* */, 

        } 
       } 
      } 
     }); 
    </script>  

我所做的是針對每個模板,我放置了一個內聯的require.config。作爲一個例子(刪除特定路徑信息):

<script type="text/javascript"> 
/* This code is on a template page inside a script tag. */ 
require.config({ 
      baseUrl: /* */, 
      paths: { 
       'jquery': /* */, 
       'jquery-mobilead': /* */, 
       'jquery-photogalleryswipe': /* */ 
      }, 
      /* Enforce ordering of jQuery plugins - which require jquery */ 
      shim: { 
       'jquery-mobilead': { 
        deps: ['jquery'], 
        exports: 'jQuery.fn.mobileAd' 
       }, 
       'jquery-photogalleryswipe': { 
        deps: ['jquery'], 
        exports: 'jQuery.fn.photoGallerySwipe' 
       }, 
       'gallery': { 
        deps: ['jquery-photogalleryswipe', 'jquery-mobilead'] 
       } 
      }, 
      urlArgs: '[email protected]@' 
     }); 

     require(['jquery', 'site', 'gallery', 'jquery-photogalleryswipe', 'jquery-mobilead'], function($, site, gallery) { 
       //This function will be called when all the dependencies 
       //listed above are loaded. Note that this function could 
       //be called before the page is loaded. 
       //This callback is optional. 

       /* Initialize code */ 
       $(document).ready(function() { 
        /* sitewide code - call the constructor to initialize */ 
        site.init(); 
        /* homepage contains a reference to a function - execute the function */ 
        gallery.initGallery(); 
       }); 
      } 
     ); 
</script> 

我認爲優化器無法優化模板內的代碼。

但是根據RequireJS API文檔,我確實有模塊JS文件。
/modules/gallery.js /modules/channel.js /modules/site.js /*等*/

這些模塊做有依賴於其他模塊,但是這些模塊都依賴於「 config'模塊,它與模板內嵌定義。如果我針對這些文件運行Optimizer,那麼優化器是否能夠正常工作,因爲其中一個模塊config,in是模板?

回答

0

我想我解決我自己的問題基於閱讀 How to load bootstrapped models in Backbone.js while using AMD (require.js)

我已經重新調整了模板變量爲需要全局對象和require.js之前聲明它。現在,模板仍然可以生成這些值,但由於require.config和require代碼可以放入外部JS文件中,因此優化器應該能夠立即查看這些文件。我還沒有嘗試過運行優化器。

<script> 
     /* This script block is in the template */ 
     var require = { 
      config: { 
       markup_id: { 
       "content": "search", 
       "page": "index", 
       "media": "mobile" 
       }, 
       page_context: { 
        "siteconfig": { 
        "mobile_video_player_id": /* */, 
        "mobile_video_player_key": /* */, 
        "mobile_ad_site": /* */, 
        "omniture_mobile_env": /* */, 
        "searchserver": /* */,    
        }, 
       "omniture": { 
        "gn": /* */, 

       } 
      } 
     }; 
    </script> 
<script data-main="/m/j/main-search" src="/m/j/require.js"></script>