RequireJS:优化的文件和旧的浏览器

RequireJS: Optimized files and older browsers

本文关键字：浏览器 文件 优化 RequireJS      更新时间：2023-09-26

我试图确定最好的方式有一个单一的缩小文件，但也支持旧的浏览器在一定程度上。我有一个大型的web应用程序，它使用了大量的第三方库来破坏IE9及以下版本。理想情况下，我希望支持这些浏览器，至少可以检测到它们并向用户显示子视图，要求他们升级。我的RequireJS流程如下:

在我的HTML中，我有一个后端条件语句，它将输出加载链上的第一个链接(我的配置文件)，或者输出最小的有效负载(如果在生产服务器上):

<?php
    if (env('APP_ENV') === 'dev') {
        echo $this->Html->script('libs/requirejs/require', ['data-main' => '/js/src/config.r']);
    } else {
        echo $this->Html->script('build.min');
    }
?>

config.r.js看起来像这样:

require.config({
    baseUrl: '/js',
    deps: ['src/boot'],
    paths: {
        'requireJS': '../bower_components/requirejs/require',
        'requireDomReady': '../bower_components/requirejs-domready/domReady',
        'handlebars': '../bower_components/handlebars/handlebars.runtime.min',
        'templates': 'src/templates',
        'jquery': '../bower_components/jquery/dist/jquery.min',
        'backbone': '../bower_components/backbone/backbone',
        'underscore': '../bower_components/underscore/underscore',
    },
    shim: {
        'handlebars': {
            exports: 'Handlebars'
        },
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['handlebars', 'underscore'],
            exports: 'Backbone'
        }
    }
});

boot.js看起来像这样:

define([
    'requireDomReady',
    'src/utils/userAgent'
], function(
    requireDomReady,
    userAgent
) {
    'use strict';
    // If we have detected that this browser isnt supported, show the appropriate screen.
    if (userAgent.isIE9 || userAgent.isIE8) {
        var upgradeScreen = document.getElementById('upgrade-screen');
        upgradeScreen.style.display = 'block';
        return;
    }
    // With the inital check of support being completed, load the main app.
    require([
        'src/app'
    ], function(
        app
    ) {
        requireDomReady(app);
    });
});

简化的有效负载基本上合并了config.r.js, boot.js和app.js以及它的所有第三方库。当最小化的有效负载在生产环境中使用所有的库时，它们都会被insta-解析，这使得IE9及以下版本在它们存在时就会出现insta-error。

我怎么能把这个分开，所以这个boot序列与app序列分开，同时仍然加载缩小的文件或松散的单个文件?我挂断的部分是我如何做到这一点，但要求它要么需要我的config.r.js，或者，根据我的环境，我的缩小的脚本文件。

任何指导将不胜感激。我不想降级库或添加多边形只是为了摆脱错误和显示升级视图。

任何导致解析错误的代码都需要放在与配置和引导不同的文件中。

你可以把浏览器检查放在配置文件中，如果是IE的话，让它添加不同的路径。

还有IE条件html注释，可以用来加载不同的文件。

这是我如何使用需求加载我的垫片和填充只有当他们是由浏览器需要。

//main
require.config({
    paths: {
        "JSON": "shims/json2",
        "Array": "shims/array",
        "input.placeholder": "shims/placeholders.min"
    },
    shim: {
        "JSON": {
            exports: "JSON"
        }
    }
});
if (typeof JSON === 'object') {
    define('JSON', [], JSON);
} else {
    //load shim for JSON now
    require(['JSON']);
}
if (Array.prototype.forEach) {
    //if forEach exists assume all new array functions exist
    define('Array', [], function () { return Array; });
}
if ('placeholder' in document.createElement('input')) {
    define('input.placeholder');
}

shim/polyfill文件要么包含一个定义，要么像JSON一样在require.config.shim中。

//shims/array.js
//Add new array functions to prototype.
if(typeof define==='function'&&define.amd){define('Array',[],function(){return Array});}

然后，如果我需要这个特性，我就包含依赖项。

require(['src/app','JSON','Array','input.placeholder'], function (app, JSON) {
    //can now use [].forEach() without checking if it exists
});
相关文章：