Kernpunkte:
import -Syntax des ES6 -Moduls und ermöglichen eine effizientere und standardisierte Codestruktur. Dieser Artikel zeigt, wie das ES -Modul im heutigen Browser verwendet wird.
Vor kurzem hatte JavaScript nicht das Konzept der Module. Es ist unmöglich, eine JavaScript -Datei direkt zu verweisen oder in eine andere Datei einzubeziehen. Wenn die Größe und Komplexität von Anwendungen wachsen, wird das Schreiben von JavaScript für Browser schwierig.
Eine häufige Lösung ist die Verwendung
// html.js
export function tag (tag, text) {
const el = document.createElement(tag)
el.textContent = text
return el
}</pre>Nach dem Login kopierenoder als externes Skript:
<🎜></pre>Nach dem Login kopieren
// app.js
import { tag } from './html.js'
const h1 = tag('h1', '? Hello Modules!')
document.body.appendChild(h1)</pre>Nach dem Login kopieren
type="module" Fügen Sie einfach </pre>
<p>
<strong> zu Ihrem
import Anforderungen file:// npx serve
für die Extraktion zu verwenden, da er nicht mit
Protokoll funktioniert. Sie können verwenden, um einen Server im aktuellen Verzeichnis für lokale Tests zu starten. browser-es-module-loader
Wenn Sie mutig genug sind, um dies jetzt in der Produktion zu versuchen, müssen Sie weiterhin separate Pakete für ältere Browser erstellen. Eine Polyfill ist in angegeben, die der Spezifikation folgt. Dies wird jedoch überhaupt nicht für Produktionsumgebungen empfohlen.
Leistung
Verwerfen Sie Build -Tools wie Babel und WebPack nicht sofort, da Browser immer noch Methoden zur Optimierung der Extraktion implementieren. Trotzdem gibt es immer noch Leistungsstoffe und Vorteile bei der zukünftigen Verwendung von ES -Modulen.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
