Die alten Versionen von JavaScript hatten keinen Import, enthielten oder erforderten, so dass viele verschiedene Ansätze für dieses Problem entwickelt wurden.
Seit 2015 (ES6) verfügt JavaScript jedoch über den Standard für ES6-Module zum Importieren von Modulen in Node.js, der auch von den meisten modernen Browsern unterstützt wird .
Erstellen Sie zur Kompatibilität mit älteren Browsern Tools wie Webpack und Rollup und / oder Transpilations-Tools wie Babel verwendet werden.
ES6-Module
ECMAScript (ES6) -Module werden in Node.js seit Version 8.5 mit dem --experimental-modulesFlag und seit mindestens Node.js Version 13.8.0 ohne Flag unterstützt. So aktivieren Sie „ESM“ (V. Node.js der vorherigen Commonjs-Stil Modulsystem [ „CJS“]) Sie entweder "type": "module"in package.jsonoder die Dateien die Erweiterung geben .mjs. (Ebenso können Module, die mit dem vorherigen CJS-Modul von Node.js geschrieben wurden, benannt werden, .cjswenn Ihre Standardeinstellung ESM ist.)
Verwenden von package.json:
{
"type": "module"
}
Dann module.js:
export function hello() {
return "Hello";
}
Dann main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
Mit hätten .mjsSie module.mjs:
export function hello() {
return "Hello";
}
Dann main.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
ECMAScript-Module in Browsern
Browser unterstützen seit Safari 10.1, Chrome 61, Firefox 60 und Edge 16 das direkte Laden von ECMAScript-Modulen (keine Tools wie Webpack erforderlich). Überprüfen Sie die aktuelle Unterstützung bei caniuse . Die .mjsErweiterung von Node.js muss nicht verwendet werden . Browser ignorieren Dateierweiterungen für Module / Skripte vollständig.
<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);
}
Lesen Sie mehr unter https://jakearchibald.com/2017/es-modules-in-browsers/
Dynamische Importe in Browsern
Durch dynamische Importe kann das Skript nach Bedarf andere Skripte laden:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Weitere Informationen finden Sie unter https://developers.google.com/web/updates/2017/11/dynamic-import
Node.js erfordern
Der ältere CJS-Modulstil, der in Node.js immer noch weit verbreitet ist, ist das module.exports/require system.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
Es gibt andere Möglichkeiten für JavaScript, externe JavaScript-Inhalte in Browser aufzunehmen, für die keine Vorverarbeitung erforderlich ist.
AJAX wird geladen
Sie können ein zusätzliches Skript mit einem AJAX-Aufruf laden und dann evalzum Ausführen verwenden. Dies ist der einfachste Weg, der jedoch aufgrund des JavaScript-Sandbox-Sicherheitsmodells auf Ihre Domain beschränkt ist. Die Verwendung evalöffnet auch die Tür zu Fehlern, Hacks und Sicherheitsproblemen.
Laden holen
Wie bei Dynamic Imports können Sie ein oder mehrere Skripte mit einem fetchAufruf laden , indem Sie Versprechen verwenden, um die Ausführungsreihenfolge für Skriptabhängigkeiten mithilfe der Fetch Inject- Bibliothek zu steuern :
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
jQuery wird geladen
Die jQuery- Bibliothek bietet Ladefunktionen in einer Zeile :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Dynamisches Laden von Skripten
Sie können dem HTML-Code ein Skript-Tag mit der Skript-URL hinzufügen. Dies ist eine ideale Lösung, um den Overhead von jQuery zu vermeiden.
Das Skript kann sich sogar auf einem anderen Server befinden. Darüber hinaus wertet der Browser den Code aus. Das <script>Tag kann entweder in die Webseite <head>eingefügt oder kurz vor dem schließenden </body>Tag eingefügt werden .
Hier ist ein Beispiel, wie dies funktionieren könnte:
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)
}
Diese Funktion fügt <script>am Ende des Kopfabschnitts der Seite ein neues Tag hinzu, in dem diesrc Attribut auf die URL festgelegt wird, die der Funktion als erster Parameter zugewiesen wird.
Beide Lösungen werden in JavaScript Madness: Dynamic Script Loading erläutert und veranschaulicht .
Erkennen, wann das Skript ausgeführt wurde
Nun gibt es ein großes Problem, über das Sie Bescheid wissen müssen. Dies bedeutet, dass Sie den Code remote laden . Moderne Webbrowser laden die Datei und führen Ihr aktuelles Skript weiter aus, da sie alles asynchron laden, um die Leistung zu verbessern. (Dies gilt sowohl für die jQuery-Methode als auch für die manuelle Methode zum Laden dynamischer Skripte.)
Wenn Sie diese Tricks direkt verwenden, können Sie Ihren neu geladenen Code in der nächsten Zeile, nachdem Sie ihn zum Laden aufgefordert haben, nicht verwenden , da er noch geladen wird.
Zum Beispiel: my_lovely_script.jsenthält 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
Dann laden Sie die schlagende Seite neu F5. Und es funktioniert! Verwirrend...
Was tun?
Nun, Sie können den Hack verwenden, den der Autor in dem Link vorschlägt, den ich Ihnen gegeben habe. Zusammenfassend lässt sich sagen, dass Personen, die es eilig haben, ein Ereignis verwenden, um eine Rückruffunktion auszuführen, wenn das Skript geladen wird. So können Sie den gesamten Code mithilfe der Remote-Bibliothek in die Rückruffunktion einfügen. Zum Beispiel:
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);
}
Dann schreiben Sie den Code, den Sie verwenden möchten, nachdem das Skript in eine Lambda-Funktion geladen wurde :
var myPrettyCode = function() {
// Here, do whatever you want
};
Dann führen Sie das alles aus:
loadScript("my_lovely_script.js", myPrettyCode);
Beachten Sie, dass das Skript möglicherweise ausgeführt wird, nachdem das DOM geladen wurde oder vorher, je nachdem, ob der Browser und ob Sie die Zeile eingefügt haben script.async = false;. Es gibt einen großartigen Artikel über das Laden von Javascript im Allgemeinen, in dem dies diskutiert wird.
Zusammenführung / Vorverarbeitung des Quellcodes
Wie oben in dieser Antwort erwähnt, verwenden viele Entwickler in ihren Projekten Build- / Transpilations-Tools wie Parcel, Webpack oder Babel, mit denen sie die kommende JavaScript-Syntax verwenden, Abwärtskompatibilität für ältere Browser bieten, Dateien kombinieren, minimieren, Code-Aufteilung usw. durchführen