在RequireJS中包含Modernizr并在head标签中包含Modernizr

ein*_*ein 13 javascript modernizr requirejs

我有RequireJS和Modernizr的问题.

我想要Modernizr资源.以及身体的其他一切.原因是Modernizr需要在DOMContentLoad之前做一些事情.我希望能够使用RequireJS将Modernizr模块加载到其他模块中.如何在开发和生产环境中实现这一目标?我使用requirejs来拉取所有依赖项并缩小所有资源.并且yeoman构建取代<script data-main="scripts/main" src="scripts/vendor/require.js"></script>了缩小版本.

在身体标签下:

<!-- 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>
Run Code Online (Sandbox Code Playgroud)

Geo*_*uer 34

你应该能够得到两者.

  • 首先,删除与modernizr相关的路径配置,您将不需要它
  • 接下来在头部加载Modernizr - 这将创建一个window.Modernizr变量.
  • 最后,在引导需要之前,定义modernizr模块

    define('modernizr', [], Modernizr);
    require(['foo', 'bar', 'modernizr'], function(foo, bar, modernizr) {
         //..profit
    }
    
    Run Code Online (Sandbox Code Playgroud)

  • require优化器从一个文件开始,并将依赖关系树捆绑在一起,将所有内容捆绑到一个优化的(并且可选地缩小的)文件中.在推送到部署之前,这是建议的构建步骤,以最小化请求数量和大小.当优化器看到''modernizr'时,它无法知道这是由页面外部提供的,它假定它在一个文件中就像所有其他文件一样,并且在找不到它时会出错(这是正确的,你想要的) .解决方案是在优化器配置中使用`'exclude'`属性告诉它不要担心''modernizr'. (6认同)
  • 我忘了提.这个技巧只有在你手动提供的`typeof`是''object'时才会起作用 (2认同)