Tout d'abord, ce n'est pas une question avec une solution unique. Je vais vous expliquer la façon dont j'utilise RequireJS qui fonctionne pour moi, et peut travailler pour vous :)
Deuxièmement, l'anglais n'est pas ma langue maternelle. Des Corrections et des conseils au sujet de la langue sera très apprécié. N'hésitez pas, les gars :)
1) c'Est d'exiger des js même pratique pour les projets qui ne sont pas sur une seule page?
Il dépend. Si votre projet n'a pas de code partagé entre les pages par exemple, RequireJS aide sera modeste. L'idée principale de RequireJS est modulariser l'application dans des blocs de code réutilisable. Si votre application utilise uniquement la page de code spécifiques, puis à l'aide de RequireJS peut être pas une bonne idée.
2) Sans utiliser l'optimiseur, à chacune de mes principaux fichiers de démarrage avec essentiellement les mêmes options de configuration. Est-il un moyen pour éviter cela? Comme le fait, pour chaque fichier principal inclure le même profil sans avoir à le construire?
Le seul moyen que je vois est de faire la configuration sur le fichier principal, ou de créer un module qui permettra de configurer RequireJS et ensuite utiliser ce module comme le premier de la dépendance main.js. Mais cela peut être difficile. Je ne pas utiliser beaucoup de main.js les fichiers dans mes applications; - je utiliser un seul qui agit comme un chargeur (voir ci-dessous).
3) r.js aller dans httpdocs_siteroot du répertoire parent?
Pas nécessairement. Vous pouvez le mettre à l'intérieur de l' /répertoire de médias, car tout ce que votre client des choses est là.
4) Est-il quelque chose de complètement faux avec mon app dir structure ou mon utilisation de requirejs?
Je ne dirais pas que. D'autre part, la structure est peut-être un peu trop fragmenté. Par exemple, vous pouvez mettre tous les "trucs 3ème partie' intérieur /vendor répertoire. Mais c'est juste un peu de sucre; votre structure fonctionne bien et semble droit. Je pense que le problème majeur est l'requirejs.config() appel à plusieurs fichiers.
J'ai eu les mêmes problèmes que vous rencontrez maintenant et j'ai fini avec la solution suivante:
1) Ne pas envelopper le non-support des processeurs AMD de fichiers compatibles avec une définition. Bien que cela fonctionne, vous pouvez obtenir les mêmes résultats à l'aide de la "cale" bien dans requirejs.config (voir ci-dessous).
2) Dans un multi-page de l'application, la solution pour moi est de ne pas exiger la page des modules spécifiques de l'optimisation de la main.js fichier. Au lieu de cela, j'ai besoin de tous le code partagé (3e partie et mon propre) à partir du fichier principal, laissant la page de code spécifiques à la charge de chaque page. Le fichier principal se termine simplement par un chargeur qui commence à la page de code après le chargement de tous les shared/lib fichiers.
C'est le code que j'utilise pour construire un multi-application à une page avec requirejs
Structure de répertoire:
/src - j'ai mis tous les clients des trucs à l'intérieur d'un répertoire src, donc, je peux utiliser l'optimiseur à l'intérieur de ce répertoire (c'est votre répertoire de médias).
/src/vendor - Ici, je place tous les 3ème partie des fichiers et des plugins, y compris require.js.
/src/lib - Ici, je place tous mes propre code qui est partagée par l'ensemble de l'application ou par quelques pages. En d'autres termes, les modules qui ne sont pas de page spécifique.
/src/page-module-xx - Et puis, je crée un répertoire pour chaque page que j'ai. Ce n'est pas une règle stricte.
/src/main.jsC'est le seul fichier principal pour l'ensemble de l'application. Il permettra de:
- configurer RequireJS, y compris les cales
- charger des bibliothèques/modules
- charger la page spécifique au module principal
C'est un exemple de requirejs.config composez le:
requirejs.config({
baseUrl: ".",
paths: {
// libraries path
"json": "vendor/json2",
"jquery": "vendor/jquery",
"somejqueryplugion": "vendor/jquery.somejqueryplufin",
"hogan": "vendor/hogan",
// require plugins
"templ": "vendor/require.hogan",
"text": "vendor/require.text"
},
// The shim section allows you to specify
// dependencies between non AMD compliant files.
// For example, "somejqueryplugin" must be loaded after "jquery".
// The 'exports' attribute tells RequireJS what global variable
// it must assign as the module value for each shim.
// For example: By using the configutation below for jquery,
// when you request the "jquery" module, RequireJS will
// give the value of global "$" (this value will be cached, so it is
// ok to modify/delete the global '$' after all plugins are loaded.
shim: {
"jquery": { exports: "$" },
"util": { exports: "_" },
"json": { exports: "JSON" },
"somejqueryplugin": { exports: "$", deps: ["jquery"] }
}
});
Et puis, après configuration, nous pouvons faire les premiers require() demande
pour toutes ces bibliothèques, et après que faire la demande pour notre "page principale" du module.
//libs
require([
"templ", //require plugins
"text",
"json", //3rd libraries
"jquery",
"hogan",
"lib/util" // app lib modules
],
function () {
var $ = require("jquery"),
// the start module is defined on the same script tag of data-main.
// example: <script data-main="main.js" data-start="pagemodule/main" src="vendor/require.js"/>
startModuleName = $("script[data-main][data-start]").attr("data-start");
if (startModuleName) {
require([startModuleName], function (startModule) {
$(function(){
var fn = $.isFunction(startModule) ? startModule : startModule.init;
if (fn) { fn(); }
});
});
}
});
Comme vous pouvez le voir dans le corps de l'exiger() ci-dessus, nous nous attendons à un autre attribut de la require.js balise de script. Les données de début de l'attribut tiendra le nom du module pour la page en cours.
Ainsi, sur la page HTML, il faut ajouter cet attribut supplémentaire:
<script data-main="main" data-start="pagemodule/main" src="vendor/require.js"></script>
En faisant cela, nous nous retrouverions avec une optimisation des main.js qui contient tous les fichiers dans "/vendor" et "/lib" répertoires (les ressources partagées), mais pas de la page scripts/modules, comme ils ne sont pas codées en dur dans le main.js en tant que dépendances. La page des modules spécifiques seront chargés séparément sur chaque page de l'application.
La "page principale" module doit retourner un function() qui seront exécutées par l'application "principal" ci-dessus.
define(function(require, exports, module) {
var util = require("lib/util");
return function() {
console.log("initializing page xyz module");
};
});
MODIFIER
Ici est un exemple de comment vous pouvez utiliser le profil pour optimiser la page des modules spécifiques qui ont plus d'un fichier.
Par exemple, disons que nous avons la page suivante du module:
/page1/main.js
/page1/dep1.js
/page1/dep2.js
Si nous n'avons pas d'optimiser ce module, alors le navigateur va faire 3 demandes, un pour chaque script.
On peut éviter cela en donnant l'ordre à.r.js pour créer un package et d'inclure ces 3 fichiers.
Sur les "modules" de l'attribut de profil:
...
"modules": [
{
name: "main" // this is our main file
},
{
// create a module for page1/main and include in it
// all its dependencies (dep1, dep2...)
name: "page1/main",
// excluding any dependency that is already included on main module
// i.e. all our shared stuff, like jquery and plugins should not
// be included in this module again.
exclude: ["main"]
}
]
En faisant cela, nous allons créer une autre page par page principale de fichier avec toutes ses dépendances. Mais, puisque nous avons déjà un fichier principal qui vous permettra de charger tous nos partagé des choses, nous n'avons pas besoin de les inclure à nouveau dans la page1/module principal.
La config est un peu bavard depuis que vous avez à faire cela pour chaque module de page où vous avez plus d'un fichier de script.
J'ai téléchargé le code de le code sur GitHub: https://github.com/mdezem/MultiPageAppBoilerplate.
C'est un travail réutilisable, il suffit d'installer le nœud et r.js module pour le nœud et d'exécuter construire.cmd (à l'intérieur du /répertoire de construction, sinon ce sera un échec, car il utilise des chemins relatifs)
J'espère avoir été clair. Laissez-moi savoir si quelque chose semble étrange ;)
Ce qui concerne les!
