Question

我正在尝试确定获得单个缩小文件的最佳方法，但也在一定程度上支持旧浏览器。我有一个大型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);
    });
});

minfied有效负载基本上合并了config.r.js，boot.js和app.js及其所有第三方库。每当缩小的有效负载在生产中被提供时，其中包含所有库，它们都是经过insta解析的，这使得IE9及其仅仅存在时就会出现insta-error。

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

任何指导都将不胜感激。我不想放弃库或添加polyfill只是为了摆脱错误并显示升级视图..

Answer 1

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

您可以将浏览器检入配置文件并使其添加不同的路径（如果它是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文件可以包含一个define，也可以在require.config.shim中，就像JSON一样。

//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
});

RequireJS：优化文件和旧版浏览器

1 个答案: