In React (ES6), warum sehe ich manchmal so? ...
%Vor%und manchmal das ?
%Vor% Was bedeutet das Schlüsselwort export ? Sollten bei der Verwendung von Webpack Änderungen an der Datei webpack.config.js erforderlich sein?
Irgendwelche Informationen darüber würden geschätzt werden, danke im Voraus.
UPDATE:
Hauptdatei.js
%Vor%external.js (dasselbe Verzeichnis)
%Vor%Das geht nicht - können Sie sehen warum?
Bevor Sie das export Schlüsselwort erklären, lassen Sie mich etwas klarstellen.
Wie Sie im Internet gesehen haben, müssen Sie in jeder Anwendung zwei wichtige Dinge verwenden:
1 / Babel
2 / webpack oder browserifizieren
Sie könnten von jsx und ES6 gehört haben.
Nun Babel Job ist das Kopieren der jsx zu js und ES6 zu ES5, damit der Browser diese beiden Dinge verstehen kann.
und export keyword ist eine neue Funktion in ES6. Lassen Sie Ihre functions , variables exportieren, damit Sie in anderen js -Dateien
ie:
hello.js
%Vor%world.js
%Vor% Webpack ist ein Modulbündler. Es nimmt eine Menge Assets (zB hello.js , world.js und Ihre Module (react, react-dom ....)) auf und wandelt diese in eine einzige Datei um.
lassen Sie uns sagen, dass wir die folgende Konfiguration für webpack
webpack es verwandelt alle Ihre js-Dateien und Ihre Module, die importiert werden, und verwandelt es in eine einzelne Datei bundle.js .
Bearbeiten: Lösen des Problems
In jsx
packen den zurückgegebenen HTML-Code immer in () .
Wenn Sie einen Wert exportieren, können Sie ihn in eine andere Datei importieren.
Wenn ich diese Klasse aus der Datei hello.js exportieren:
Dann kann ich es importieren und in der Datei greeting.js verwenden.
Dies ist nicht spezifisch für React und Sie können diese Syntax verwenden, um beliebige Arten von Werten in jeder Art von JavaScript-Anwendungen zu importieren und zu exportieren.
Nachdem Sie ein Tool wie Babel verwendet haben, um dies in Code umzuwandeln, der in einem Browser ausgeführt werden kann, können Sie ein Tool wie Webpack verwenden Bündeln Sie alle von Ihnen verwendeten Module in einer einzigen Skriptdatei, die Sie für den Browser bereitstellen können.
Diese Modul-Syntax zum Importieren und Exportieren bietet auch eine nützliche Abkürzung für Module, die einen "Standard" -Wert exportieren.
%Vor%Im Allgemeinen möchten Sie dieses Formular verwenden, wenn Ihr Modul nur einen Wert exportiert.
Tags und Links javascript export reactjs components ecmascript-6