Les anciennes versions de JavaScript n'avaient pas d'import, d'include ou de require, si bien que de nombreuses approches différentes de ce problème ont été développées.
Mais depuis 2015 (ES6), JavaScript dispose du Modules ES6 pour importer des modules dans Node.js, ce qui est également supporté par la plupart des navigateurs modernes .
Pour assurer la compatibilité avec les anciens navigateurs, des outils de construction comme Webpack y Rollup et/ou des outils de transpilation comme Babel peut être utilisé.
Modules ES6
Les modules ECMAScript (ES6) ont été supporté dans Node.js depuis la version 8.5, avec le --experimental-modules et depuis au moins Node.js v13.8.0 sans ce drapeau. Pour activer "ESM" (par opposition au système de modules de style CommonJS ["CJS"] de Node.js), vous pouvez utiliser soit "type": "module" en package.json ou donner aux fichiers l'extension .mjs . (De même, les modules écrits avec le précédent module CJS de Node.js peuvent être nommés .cjs si votre valeur par défaut est ESM).
Utilisation de package.json :
{
"type": "module"
}
Puis module.js :
export function hello() {
return "Hello";
}
Puis main.js :
import { hello } from './module.js';
let val = hello(); // val is "Hello";
Utilisation de .mjs vous auriez module.mjs :
export function hello() {
return "Hello";
}
Puis 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 (sans l'aide d'outils comme Webpack). depuis Safari 10.1, Chrome 61, Firefox 60 et Edge 16. Consultez l'assistance actuelle à l'adresse suivante caniuse . Il n'est pas nécessaire d'utiliser Node.js'. .mjs les navigateurs ignorent complètement les extensions de fichiers sur modules/scripts.
<script type="module">
import { hello } from './hello.mjs'; // Or the extension could be just `.js`
hello('world');
</script>
// hello.mjs -- or the extension could be just `.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
Plus d'informations sur https://jakearchibald.com/2017/es-modules-in-browsers/
Importations dynamiques dans les navigateurs
Les importations dynamiques permettent au script de charger d'autres script selon les besoins :
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Plus d'informations sur https://developers.google.com/web/updates/2017/11/dynamic-import
Node.js require
L'ancien style de module CJS, encore largement utilisé dans Node.js, est le module 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 moyens pour JavaScript d'inclure des contenus JavaScript externes dans les navigateurs qui ne nécessitent pas de prétraitement.
Chargement AJAX
Vous pourriez charger un script supplémentaire avec un appel AJAX et ensuite utiliser eval pour le faire fonctionner. C'est la méthode la plus simple, mais elle est limitée à votre domaine en raison du modèle de sécurité de la sandbox JavaScript. Utilisation de eval ouvre également la porte aux bogues, aux piratages et aux problèmes de sécurité.
Chargement des données
Comme pour les importations dynamiques, vous pouvez charger un ou plusieurs scripts avec une commande fetch en utilisant des promesses pour contrôler l'ordre d'exécution des dépendances script à l'aide de l'option Récupérer Injecter bibliothèque :
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 jQuery
El jQuery La bibliothèque fournit une fonctionnalité de chargement en une seule ligne :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Chargement du script dynamique
Vous pourriez ajouter une balise script avec l'URL script dans le HTML. Pour éviter la surcharge de jQuery, c'est une solution idéale.
Le script peut même résider sur un serveur différent. En outre, le navigateur évalue le code. Le site <script> peut être injecté soit dans la page web <head> ou inséré juste avant la fermeture </body> étiquette.
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 un nouveau <script> à la fin de la section d'en-tête de la page, où la balise src est fixé à l'URL qui est donnée à la fonction comme premier paramètre.
Ces deux solutions sont discutées et illustrées dans JavaScript Madness : Chargement dynamique du script .
Détecter quand le script a été exécuté.
Maintenant, il y a un gros problème que vous devez connaître. Faire cela implique que vous chargez le code à distance . Les navigateurs web modernes chargeront le fichier et continueront à 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 dynamique manuel du script).
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.js contient 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
Puis vous rechargez la page en frappant F5 . Et ça marche ! Confusion...
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 gens pressés, il utilise un événement pour exécuter une fonction callback lorsque le script est chargé. Ainsi, vous pouvez mettre tout le code utilisant la bibliothèque distante dans la fonction callback. 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 voulez utiliser APRÈS que le script soit chargé dans une fonction lambda :
var myPrettyCode = function() {
// Here, do whatever you want
};
Puis vous exécutez tout ça :
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 du Javascript en général qui traite de ce sujet.
Fusion/prétraitement du code source
Comme nous l'avons mentionné au début de cette réponse, de nombreux développeurs utilisent des outils de construction/transpilation tels que Parcel, Webpack ou Babel dans leurs projets, ce qui leur permet d'utiliser la nouvelle syntaxe JavaScript, d'assurer la rétrocompatibilité avec les anciens navigateurs, de combiner des fichiers, de réduire le code, de le fractionner, etc.
0 votes
Documents MDN sur les modules JavaScript avec exemples correspondants sur github