0

単一の縮小ファイルを作成する最善の方法を決定しようとしていますが、古いブラウザーもある程度サポートしています。IE9 以下で動作しない多数のサードパーティ ライブラリを使用している大規模な Web アプリケーションがあります。理想的には、少なくともこれらのブラウザーを検出し、ユーザーにサブビューを表示してアップグレードを求めるまで、これらのブラウザーをサポートしたいと考えています。私の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ます。縮小されたペイロードがすべてのライブラリを含む本番環境で提供されるときはいつでも、それらが存在するだけで IE9 以下の insta-error になる insta-parse されます。boot.jsapp.js

縮小されたファイルまたは緩い個々のファイルのいずれかをロードしながら、このbootシーケンスがシーケンスから分離されるように、これを分割するにはどうすればよいですか? app私がハングアップしている部分は、これを行う方法ですが、config.r.js、または環境に応じて縮小されたスクリプト ファイルのいずれかを要求するように依頼することです。

任意のガイダンスをいただければ幸いです。エラーを取り除き、アップグレード ビューを表示するためだけに、ライブラリをダウングレードしたり、ポリフィルを追加したりする必要はありません。

4

1 に答える 1

0

解析エラーを引き起こすコードは、構成および起動とは別のファイルにある必要があります。

ブラウザ チェックを設定ファイルに入れ、IE の場合は別のパスを追加するようにすることができます。

さまざまなファイルをロードするために使用できる IE 条件付き HTML コメントもあります。

これは、ブラウザーで必要な場合にのみ、requirejs を使用してシムとポリフィルを読み込む方法です。

//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 に答える