0

我正在尝试确定拥有单个缩小文件的最佳方式，但也在一定程度上支持旧版浏览器。我有一个大型 Web 应用程序，它使用了大量破坏 IE9 及更低版本的 3rd 方库。理想情况下，我希望至少支持这些浏览器，以检测它们并向用户显示子视图，要求他们升级。我的 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它的所有 3rd 方库。每当缩小的有效负载在其中包含所有库的生产环境中提供时，它们都会被 insta-parsed，这使得 IE9 及以下的 insta-error 仅在它们存在时出现。

我如何将其拆分，以便该boot序列与序列分开app，同时仍加载缩小文件或松散的单个文件？我挂断的部分是我如何做到这一点，但要求它要么需要我的 config.r.js，要么需要我的缩小脚本文件，具体取决于我的环境。

任何指导将不胜感激。我不想仅仅为了摆脱错误并显示升级视图而降级库或添加 polyfills..

4

1 回答 1

0

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

如果是 IE，您可以将浏览器检查放入配置文件并使其添加不同的路径。

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

这就是我使用 requirejs 仅在浏览器需要它们时才加载我的垫片和 polyfill 的方式。

//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
});
于 2014-05-13T00:19:59.747 回答