Gibt es in JavaScript etwas Ähnliches wie @import in CSS, mit der Sie eine JavaScript-Datei in eine andere JavaScript-Datei einfügen können?
Antworten
Zu viele Anzeigen?
Kamil Kiełczewski
Punkte
69048
ES6-Module
Oui verwenden Sie type="module" in einem Skript-Tag ( Unterstützung ):
<script type="module" src="script.js"></script>Und in einem script.js Datei eine weitere Datei wie diese einfügen:
import { hello } from './module.js';
...
// alert(hello());In "module.js" müssen Sie die Funktion/Klasse exportieren die Sie importieren werden:
export function hello() {
return "Hello World";
}Eine Arbeit Beispiel ist hier .
tggagne
Punkte
2794
JMawer
Punkte
259
Oder verwenden Sie ein Skript, um die Daten vor dem Hochladen zu verketten, anstatt sie zur Laufzeit einzuschließen.
Ich benutze Ritzel (Ich weiß nicht, ob es noch andere gibt). Sie erstellen Ihren JavaScript-Code in separaten Dateien und fügen Kommentare ein, die von der Sprockets-Engine als Includes verarbeitet werden. Für die Entwicklung können Sie Dateien sequentiell einschließen, dann für die Produktion, um sie zusammenzuführen...
Siehe auch:
Manohar Reddy Poreddy
Punkte
20455
Ich hatte ein einfaches Problem, aber ich war verblüfft von den Antworten auf diese Frage.
Ich musste eine Variable (myVar1), die in einer JavaScript-Datei (myvariables.js) definiert war, in einer anderen JavaScript-Datei (main.js) verwenden.
Hierfür habe ich wie folgt vorgegangen:
Der JavaScript-Code wurde in der richtigen Reihenfolge in die HTML-Datei geladen, zuerst myvariables.js, dann main.js:
<html>
<body onload="bodyReady();" >
<script src="myvariables.js" > </script>
<script src="main.js" > </script>
<!-- Some other code -->
</body>
</html>Datei: myvariables.js
var myVar1 = "I am variable from myvariables.js";Datei: main.js
// ...
function bodyReady() {
// ...
alert (myVar1); // This shows "I am variable from myvariables.js", which I needed
// ...
}
// ...Wie Sie gesehen haben, hatte ich eine Variable aus einer JavaScript-Datei in einer anderen JavaScript-Datei verwendet, aber ich brauchte sie nicht in eine andere einzubinden. Ich musste nur sicherstellen, dass die erste JavaScript-Datei vor der zweiten JavaScript-Datei geladen wird und dass die Variablen der ersten JavaScript-Datei automatisch in der zweiten JavaScript-Datei verfügbar sind.
Das hat mir den Tag gerettet. Ich hoffe, das hilft.
Isaac Gregson
Punkte
1525
En @import Syntax für einen CSS-ähnlichen JavaScript-Import ist mit einem Tool wie Mixture über deren spezielle .mix Dateityp (siehe aquí ). Ich nehme an, dass die Anwendung dies über eine der oben genannten Methoden tut.
Aus der Mixtur-Dokumentation auf .mix Dateien:
Mischdateien sind einfach .js oder .css Dateien mit .mix. im Dateinamen. A Mix-Datei erweitert einfach die Funktionalität einer normalen Stil- oder Skriptdatei und ermöglicht Ihnen das Importieren und Kombinieren.
Hier ein Beispiel .mix Datei, die mehrere .js Dateien in eine:
// scripts-global.mix.js
// Plugins - Global
@import "global-plugins/headroom.js";
@import "global-plugins/retina-1.1.0.js";
@import "global-plugins/isotope.js";
@import "global-plugins/jquery.fitvids.js";Mixture gibt dies aus als scripts-global.js und auch als Minified-Version ( scripts-global.min.js ).
Hinweis: Ich bin in keiner Weise mit Mixture verbunden, außer dass ich es als Front-End-Entwicklungswerkzeug benutze. Ich stieß auf diese Frage, als ich eine .mix JavaScript-Datei in Aktion zu sehen (in einer der Mixture Boilerplates) und war etwas verwirrt davon ("Das kann man doch machen?", dachte ich mir). Dann stellte ich fest, dass es sich um einen anwendungsspezifischen Dateityp handelt (etwas enttäuschend, zugegeben). Nichtsdestotrotz dachte ich, dass das Wissen für andere hilfreich sein könnte.
Anmerkung: Mixture wurde am 26.07.2016 eingestellt (nachdem es am 12.04.2015 als Open Source veröffentlicht wurde).
3 Stimmen
MDN-Dokumente über JavaScript-Module con entsprechende Beispiele auf github
0 Stimmen
Meine Antwort hier stackoverflow.com/a/72335692/9868445 wurde anonym und ohne Angabe von Gründen heruntergestuft, aber ich empfehle trotzdem einen Blick darauf zu werfen.