Depuis 2015 (ES6), JavaScript dispose d'un module ES6 standard pour importer des modules dans Node.js. Cette fonctionnalité est prise en charge par la plupart des navigateurs modernes.
Pour assurer la compatibilité avec les anciens navigateurs, vous pouvez utiliser des outils de création tels que Webpack et Rollup et des outils de conversion tels que Babel.
module ES6
Les modules ECMAScript (ES6) sont pris en charge dans Node.js depuis la v8.5. Pour activer « ESM » (par rapport à l'ancien système de module de style CommonJS dans Node.js [« CJS »]), utilisez "type": "module"dans package.json ou dans un fichier ajoutez l'extension .mjs. (De même, si la valeur par défaut est ESM, un module écrit dans un ancien Node.js module CJS peut être nommé .cjs)
Utilisation package.json
//package.json
{
"type": "module"
}Ensuite module.js
//module.js
export function hello() {
return "Hello";
}Ensuite main.js
//main.js
import { hello } from './module.js';
let val = hello(); // val is "Hello";En utilisant .mjs, vous auriez module.mjs:
//module.mjs
export function hello() {
return "Hello";
}Ensuite main.mjs:
//main.mjs
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";Module de navigateur ECMAScript
Le navigateur prend en charge le chargement direct des modules ECMAScript à partir de Safari 10.1, Chrome 61, Firefox 60 et Edge 16 (aucun outil tel que Webpack n'est requis). Consultez le support actuel pour peut utiliser. Il n'est pas nécessaire d'utiliser l'extension Node.js.mjs. Le navigateur ignore complètement l'extension de fichier module/script.
<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);
}Importation dynamique dans le navigateur
L'importation dynamique permet à un script de charger d'autres scripts si nécessaire.
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>Node.js requiert
Le module CJS qui est encore largement utilisé dans Node.js est module.exports/ requiresystem.
// anymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}// server.js
const anymodule= require('./anymodule');
let val = anymodule.hello(); // val is "Hello"Chargement AJAX
Des scripts supplémentaires peuvent être chargés avec des appels AJAX et exécutés à l'aide de eval. C'est le moyen le plus simple, mais il y a des risques de bugs fréquents ainsi que des problèmes de sécurité.
Utiliser fetch et la librairie fetchappels
Le procédé est similaire aux importations dynamiques, vous pouvez charger un ou plusieurs scripts en utilisant les appels fetch et la bibliothèque FetchInject pour contrôler l'ordre d'exécution des dépendances.
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 offre la possibilité de lire une seule ligne.
$.getScript("m_script.js", function() {
alert("Script loaded but not necessarily executed.");
});Chargement de script dynamique
Vous pouvez ajouter des balises de script à l'aide de l'URL du script dans le code HTML.
Le script peut être hébergé sur un autre serveur. La balise <script> peut être placée dans la section <head> ou juste avant la balise de fin </body> .
Voici un exemple de son fonctionnement :
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 ajoute une nouvelle balise <script> à la fin de la section d'en-tête de la page. Ici, l'attribut src est défini sur l'URL spécifiée dans la fonction comme premier paramètre.