RequireJS: Оптимізовані файли та старі браузери - javascript, requirejs, requirejs-optimizer

Я намагаюся визначити найкращий спосіб матиодин мініфікований файл, але також підтримує старіші браузери. У мене є велика веб-програма, яка використовує безліч сторонніх бібліотек, які порушують 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 разом із усіма своїми сторонніми бібліотеками. Кожного разу, коли зменшене корисне навантаження подається у виробництво з усіма бібліотеками всередині нього, вони "повторно аналізуються, що робить IE9 і нижче помилки insta просто за їхньої самої присутності.

Як я міг розділити це так це boot послідовність окрема від app послідовності, одночасно завантажуючи або зменшенефайли чи вільні окремі файли? Частина, з якою я зависаю, - це те, як я міг це зробити, але попросити її вимагати або мого config.r.js, або мого мінімізованого файлу сценарію залежно від мого середовища.

Будь-яке керівництво взагалі буде вдячне. Я не хочу мати попередню версію бібліотек або додавати поліфіли лише для того, щоб позбутися помилок і показати подання оновлення ..

Відповіді:

0 для відповіді № 1

Будь-який код, який спричиняє помилку синтаксичного аналізу, повинен бути в іншому файлі, що відповідає вашому конфігуру та завантаженню.

Ви можете помістити перевірку браузера у файл конфігурації та зробити так, щоб він додавав різні шляхи, якщо це IE.

Є також умовні HTML-коментарі IE, які можна використовувати для завантаження різних файлів.

Ось як я використовую 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 або включає дефініцію, або він знаходиться в 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
});

---