web-dev-qa-db-fra.com

Comment importer / inclure des fichiers source en JavaScript?

Duplicata possible:
Comment inclure un fichier js dans un autre fichier js?

Supposons que j'ai quelques fichiers source JavaScript: a.js, a1.js, et a2.js. Fonctions de a.js appeler des fonctions depuis a1.js et a2.js.

Maintenant, je dois déclarer tous ces fichiers dans ma page HTML. Je voudrais déclarer seulement a.js dans le HTML et "importer/inclure" a1.js, et a2.js dans le a.js fichier source.

Est-ce que ça fait du sens? Puis-je le faire en JavaScript?

javascriptclient-side
17
Michael

Vous ne pouvez pas spécifier les importations en javascript Vanilla.

Ainsi, vos solutions (à l'exception des infrastructures lourdes côté serveur) sont:

  • faites simplement les importations

  • concaténer vos fichiers js (et les minimiser du même coup, par exemple en utilisant le compilateur de fermeture )

  • utiliser un module itool comme require.js

Tant que vous n'êtes pas expérimenté, et si votre nombre de fichiers est faible (moins de 15), je vous recommande de choisir simplement la première ou la deuxième solution. L'utilisation d'un chargeur de module peut avoir des effets secondaires que vous ne souhaitez pas déboguer lorsque vous commencez à apprendre le javascript.

14
Denys Séguret

Vous pouvez importer:

<script type="text/javascript"src="a1.js"></script>
<script type="text/javascript"src="a2.js"></script>
<script type="text/javascript"src="a3.js"></script>

si vous voulez le faire directement à partir du JS, vous pouvez utiliser Ajax, ce post explique comment: include-javascript-file-inside-javascript-file

9
Israelm

Vous pouvez regrouper des fichiers JavaScript (et également CSS) à l'aide de certains outils pour réduire le nombre de fichiers que vous devez inclure. Cela augmente également les performances de chargement des pages.

Ces outils combinent plusieurs fichiers JavaScript en un seul fichier JavaScript (éventuellement en réduisant également les fichiers) et plusieurs fichiers CSS en un seul fichier CSS. Cela se traduit par moins de connexions HTTP du navigateur au serveur, donc il y a moins de choses à récupérer en série.

ASP.Net MVC 4 a une prise en charge intégrée pour cela:

http://theshravan.net/bundling-and-minification-support-in-asp-net-mvc-4/

Il existe également un certain nombre de solutions pour d'autres environnements, telles que Juicer .

Si vous ne pouvez pas regrouper toutes les ressources (peut-être que certaines proviennent d'un CDN alors que d'autres sont servies localement), vous pouvez utiliser un gestionnaire de charge tel que require.js .

2
Eric J.