RequireJS chemins de config
Mon développement config (dans "index.html" fichier) pour RequireJS est:
<script src="require-2.1.5.min.js"></script>
<script>
require.config({
baseUrl: 'js',
paths: {
angular: 'libraries/angular-1.1.5.min',
jquery: 'libraries/jquery-2.0.0.min',
underscore: 'libraries/underscore-1.4.4.min',
...
zeroclipboard: 'plugins/zeroclipboard-1.0.7.min',
tablesorter: 'plugins/jquery.tablesorter-2.9.1.min',
...
},
shim: {
'angular': {
exports: 'angular'
},
'underscore': {
exports: '_'
}
},
packages: [
{
name: 'index',
location: 'app/index',
main: 'main'
}
]
});
require(['index']);
</script>
Mais sur la production, je n'ai que 2 fichiers concaténés pour les bibliothèques et les plugins:
js/libraries.js //all jQuery, AngularJS, RequireJS, Underscore and other libraries concatenated
js/plugins.js //all plugins (already an AMD modules, no need for "shim" config) concatenated
Alors, comment puis-je écrire ma config "chemins" maintenant? Je n'ai pas de 'libraries/angular-1.1.5.min.js' et d'autres chemins.
Ma solution est d'écrire:
paths: {
angular: 'libraries',
underscore: 'libraries'
}
- Je associer AngularJS et trait de Soulignement pour 'libraries.js' fichier et tout fonctionne parfaitement. (Pas besoin de jQuery et tous les plugins — ils sont déjà un AMD modules).
Mais est-ce une bonne façon d'écrire des chemins? Ma solution me semble un peu sale solution de contournement, pas les meilleures pratiques de solution.
Mon r.js processus de construction:
({
baseUrl: 'scripts',
paths: {
jquery: 'jquery-2.0.0.min',
...
tablesorter: 'jquery.tablesorter-2.0.5.min',
zeroclipboard: 'zeroclipboard-1.0.7.min'
},
name: 'foo/main',
exclude: [
'angular',
'jquery',
...
'tablesorter',
'zeroclipboard'
],
optimize: 'uglify',
out: 'production/js/foo.js'
})
UPD 1:
Ce que je veux:
www.mysite.com/about.html:
<script src="js/libraries.js"></script><-- jQuery (already AMD), AngularJS (not AMD), RequireJS, Underscore (not AMD) and other libraries already here, only 1 http request needed //-->
<script src="js/plugins.js"></script><-- all AMD //-->
<script>
require.config({
baseUrl: 'js',
paths: {
angular: WHAT I NEED TO WRITE HERE?,
underscore: WHAT I NEED TO WRITE HERE?
},
shim: {
'angular': {
exports: 'angular'
},
'underscore': {
exports: '_'
}
},
packages: [
{
name: 'about',
location: 'js',
main: 'about'
}
]
});
require(['about']); //will load "js/about.js"
</script>
2 UPD:
Ok, c'est clair au sujet de "priorité", donc, je n'ai pas besoin pour le premier et le deuxième «script» tags (mais j'ai besoin de séparer "Require.js" à partir de "libraries.js") — RequireJS les charge automatiquement. Mais ce qui devrait être fait avec les non-AMD bibliothèques "libraries.js" fichier?
AngularJS et UnderscoreJS sont non-AMD modules, c'est pourquoi j'ai utiliser "shim", à droite? Mais pour faire de "shim" le travail, j'ai besoin d'utiliser des "chemins" aussi, afin de "shim" peut localiser calée modules, droit? Mais j'ai encore 1 seul fichier "libraries.js" et je ne peux pas écrire dans "chemin d'accès" option... vraiment coincé...
C'est tous des grands avec votre réponse, je viens de faire une mise à jour avant la lecture de votre mise à jour 🙂
OriginalL'auteur artuska | 2013-05-29
Vous devez vous connecter pour publier un commentaire.
Afin de disposer de bibliothèques de code préchargé vous devez utiliser la priorité d'une option de configuration.
vous pouvez placer quelque chose comme ceci dans votre
foo/main.js
fichierEt ensuite votre fichier de build pourrait ressembler à ceci.
Les bibliothèques et les plugins fichier devrait contient une instruction define qui définissent toutes les dépendances qui sont considérées comme générales /télécharger la fois.
Ah oui, ça fait beaucoup de sens. Je pense que vous avez besoin de prendre un coup d'oeil à la
priority
options de configuration pour permettre à plusieurs couches de sortie requirejs.org/docs/1.0/docs/faq-optimization.html#priorityj'ai édité ma question afin de mieux refléter l'option priorité au besoin de js
Super! Je vais le tester maintenant.
OriginalL'auteur Willem D'Haeseleer
Vous devez utiliser la même configuration pour les deux environnements. Et ce type de configuration que vous avez devrait être dans le fichier externe. Lorsque vous optimisez l'utilisation de r.j, tous les modules déjà dans ce fichier unique afin de RequireJS va juste utiliser sans chargement. Semble que vous avez besoin pour optimiser vos processus de construction.
La caisse de mon récent blog à ce sujet.
Je devrais peut-être faire manuellement toutes les bibliothèques être un AMD modules? Je veux dire, il suffit d'éditer Angular.js fichier et l'envelopper de son code dans "define('angulaire', [], function () { ... })"?
Je suppose que cela aurait du sens de ces grands modules exclure de construire. Vous pouvez consulter github.com/tnajdek/angular-requirejs-seed projet où AngularJS est utilisé conjointement avec RequireJS.
OriginalL'auteur Tomas Kirda