Les anciennes versions de JavaScript n'avaient pas d'importation, d'inclusion ou d'exigence, donc de nombreuses approches différentes de ce problème ont été développées.
Mais depuis 2015 (ES6), JavaScript a la norme des modules ES6 pour importer des modules dans Node.js, qui est également pris en charge par la plupart des navigateurs modernes .
Pour la compatibilité avec les anciens navigateurs, des outils de construction comme Webpack et Rollup et / ou outils de transpilation comme Babel peuvent être utilisés.
Modules ES6
Les modules ECMAScript (ES6) sont pris en charge dans Node.js depuis la v8.5, avec l' --experimental-modulesindicateur, et depuis au moins Node.js v13.8.0 sans l'indicateur. Pour activer « ESM » ( par rapport précédent système de module de style CommonJS de Node.js [ « CJS »]) vous soit utiliser "type": "module"dans package.jsonou donner les fichiers l'extension .mjs. (De même, les modules écrits avec le module CJS précédent de Node.js peuvent être nommés .cjssi votre valeur par défaut est ESM.)
En utilisant package.json:
{
"type": "module"
}
Ensuite module.js:
export function hello() {
return "Hello";
}
Ensuite main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
En utilisant .mjs, vous auriez module.mjs:
export function hello() {
return "Hello";
}
Ensuite main.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
Modules ECMAScript dans les navigateurs
Les navigateurs prennent en charge le chargement direct des modules ECMAScript (aucun outil tel que Webpack n'est requis) depuis Safari 10.1, Chrome 61, Firefox 60 et Edge 16. Vérifiez la prise en charge actuelle sur caniuse . Il n'est pas nécessaire d'utiliser l' .mjsextension Node.js ; les navigateurs ignorent complètement les extensions de fichiers sur les modules / scripts.
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
En savoir plus sur https://jakearchibald.com/2017/es-modules-in-browsers/
Importations dynamiques dans les navigateurs
Les importations dynamiques permettent au script de charger d'autres scripts selon les besoins:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
En savoir plus sur https://developers.google.com/web/updates/2017/11/dynamic-import
Node.js nécessite
L'ancien style de module CJS, encore largement utilisé dans Node.js, est le module.exports/require système.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
Il existe d'autres façons pour JavaScript d'inclure du contenu JavaScript externe dans les navigateurs qui ne nécessitent pas de prétraitement.
Chargement AJAX
Vous pouvez charger un script supplémentaire avec un appel AJAX puis l'utiliser evalpour l'exécuter. C'est le moyen le plus simple, mais il est limité à votre domaine en raison du modèle de sécurité JavaScript sandbox. L'utilisation evalouvre également la porte à des bugs, des hacks et des problèmes de sécurité.
Récupérer le chargement
Comme Dynamic Imports, vous pouvez charger un ou plusieurs scripts avec un fetchappel en utilisant des promesses pour contrôler l'ordre d'exécution des dépendances de script à l'aide de la bibliothèque Fetch Inject :
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
Chargement de jQuery
La bibliothèque jQuery fournit une fonctionnalité de chargement sur une seule ligne :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Chargement de script dynamique
Vous pouvez ajouter une balise de script avec l'URL du script dans le code HTML. Pour éviter les frais généraux de jQuery, c'est une solution idéale.
Le script peut même résider sur un autre serveur. De plus, le navigateur évalue le code. La <script>balise peut être injectée dans la page Web <head>ou insérée juste avant la </body>balise de fermeture .
Voici un exemple de la façon dont cela pourrait fonctionner:
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
Cette fonction ajoutera une nouvelle <script>balise à la fin de la section d'en-tête de la page, où l' srcattribut est défini sur l'URL qui est donnée à la fonction comme premier paramètre.
Ces deux solutions sont discutées et illustrées dans JavaScript Madness: Dynamic Script Loading .
Détecter quand le script a été exécuté
Maintenant, il y a un gros problème que vous devez connaître. Cela implique que vous chargez le code à distance . Les navigateurs Web modernes chargeront le fichier et continueront d'exécuter votre script actuel car ils chargent tout de manière asynchrone pour améliorer les performances. (Cela s'applique à la fois à la méthode jQuery et à la méthode de chargement manuel de script dynamique.)
Cela signifie que si vous utilisez ces astuces directement, vous ne pourrez pas utiliser votre code nouvellement chargé la ligne suivante après avoir demandé son chargement , car il sera toujours en cours de chargement.
Par exemple: my_lovely_script.jscontient MySuperObject:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Ensuite, vous rechargez la page qui frappe F5. Et il fonctionne! Déroutant...
Que faire alors?
Eh bien, vous pouvez utiliser le hack que l'auteur suggère dans le lien que je vous ai donné. En résumé, pour les personnes pressées, il utilise un événement pour exécuter une fonction de rappel lorsque le script est chargé. Vous pouvez donc mettre tout le code à l'aide de la bibliothèque distante dans la fonction de rappel. Par exemple:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
Ensuite, vous écrivez le code que vous souhaitez utiliser APRÈS le chargement du script dans une fonction lambda :
var myPrettyCode = function() {
// Here, do whatever you want
};
Ensuite, vous exécutez tout cela:
loadScript("my_lovely_script.js", myPrettyCode);
Notez que le script peut s'exécuter après le chargement du DOM ou avant, selon le navigateur et si vous avez inclus la ligne script.async = false;. Il y a un excellent article sur le chargement de Javascript en général qui en discute.
Fusion / prétraitement du code source
Comme mentionné en haut de cette réponse, de nombreux développeurs utilisent des outils de construction / transpilation comme Parcel, Webpack ou Babel dans leurs projets, leur permettant d'utiliser la syntaxe JavaScript à venir, de fournir une compatibilité descendante pour les navigateurs plus anciens, de combiner des fichiers, de réduire, effectuer le fractionnement de code, etc.