在RequireJS中包含Modernizr並且在頭部標記中包含Modernizr

我有RequireJS和Modernizr的問題。在RequireJS中包含Modernizr並且在頭部標記中包含Modernizr

我想Modernizr資源在頭上。和身體的其他一切。原因是Modernizr需要在DOMContentLoad之前做一些事情。我希望能夠使用RequireJS將Modernizr模塊加載到其他模塊中。我如何在開發和生產環境中實現這一目標？我使用requirejs來拉取所有的依賴關係並縮小所有的資源。並且yeoman版本用縮小版本取代<script data-main="scripts/main" src="scripts/vendor/require.js"></script>。

body標籤下：

<!-- build:js ikl.app.js --> 
<script data-main="scripts/main" src="scripts/vendor/require.js"></script> 
    <!-- endbuild --> 
    <script> 
    requirejs.config({ 

     paths: { 

      'jquery'  : 'vendor/jquery', 
      'handlebars' : 'vendor/handlebars', 
      'ember'   : 'vendor/ember', 
      'ember-data' : 'vendor/ember-data', 
      'modernizr'  : 'vendor/modernizr' // This should be removed 


     }, 

     baseUrl: 'scripts', 


     shim: { 


      'jquery' : { 

       exports : 'jQuery' 

      }, 

      'ember': { 

       deps: ['jquery', 'handlebars'], 
       exports: 'Ember' 

      }, 

      'ember-data': { 

       deps: ['ember'], 
       exports: 'DS' 

      }, 

      'handlebars': { 

       exports: 'Handlebars' 

      }, 

      'modernizr': { 
       exports: 'Modernizr' 
      } 

     } 

    }); 

    require([ 

     'modules/system/controllers/system.controller', 
     'jquery', 
     'ember', 
     'ember-data', 
     'handlebars', 
     'modernizr' 

    ], 
     function(systemController) { 
      systemController.renderView(); 
     } 

    ); 

    </script>

來源

2012-11-19 einstein

爲什麼不直接加載Modernizr的同步在頭一個腳本元素？您可能希望頁面等待Modernizr運行，以便所有CSS類等都存在，並且您不會因爲各種css類別突然啓動而產生難看的「風格跳躍」。 –

在性能上有所提升身體標籤。它比使用JS邏輯更快地呈現HTML。我想盡可能少的JS邏輯在頭上 – einstein

flash-of-unstyled-content是一個令人信服的論點，不要在Modernizr本身加載之前呈現HTML。再想一想。 –

你應該能夠同時獲得。

首先，刪除你的路的配置，涉及到Modernizr的，你不會需要它
下一頁負荷的Modernizr的頭 - 這將創建一個window.Modernizr變量。

最後，在你的引導需要，定義Modernizr的模塊

define('modernizr', [], Modernizr); 
require(['foo', 'bar', 'modernizr'], function(foo, bar, modernizr) { 
    //..profit 
}

來源

2013-05-08 17:12:37

我還應該聲明，如果你在優化你的腳本，請確保排除'modernizr'，因爲它不需要打包在優化的捆綁包中。 –

請詳細說明一下？ – pilau

需求優化器從一個文件開始，並遍歷依賴關係樹，將所有內容捆綁在一起，形成一個優化（並可選擇縮小）的文件。在推送到部署之前，這是建議的構建步驟，以儘量減少請求數量和大小。當優化器看到「'modernizr'」時，它無法知道這是由頁面外部提供的，它假定它在一個像所有其他文件一樣的文件中，並且在找不到時會出錯（這是正確的並且您想要的）。解決方法是在優化器配置中使用「exclude」屬性來告訴它不要擔心「modernizr」。 –

在RequireJS中包含Modernizr並且在頭部標記中包含Modernizr

回答

相關問題