Heute habe ich versucht, einem Freund bei der Verwendung des JS-Moduls zu helfen, das er auf Github gefunden hat. Mein Freund ist ein ausgezeichneter Wissenschaftler, aber kein JS-Spezialist. Seit ich in den letzten sechs Jahren am Massachusetts Institute of Technology Usability-Forschung und -Lehre betrieben habe, ist meine Haut frostig geworden, weil alles verwirrt ist. Eine Reihe unnötiger Ausnahmen, mysteriöser Fehler und mangelndes Feedback. Und es scheint mir, dass ich ihm nicht zu viel geholfen habe, um die Enttäuschung zu überleben, die er während dieser Stunde der Qual oder so erlebte, bis er aufgab.Es war so etwas ...Hinweis: Paket- und Personennamen wurden geändert, um ihre Identität zu schützen. Ich habe auch einige Probleme ausgelassen, die für dieses Paket zu spezifisch waren. Einige Fehler werden aus dem Speicher wiederhergestellt. Lassen Sie mich wissen, wenn ich etwas falsch verstanden habe.John : Hey, ich möchte diesen Algorithmus ausprobieren, den ich bei Github gefunden habe. Er sagt, was verwendet werden muss import functionName packageName, und ruft dann an functionName(). Alles scheint ziemlich einfach! Ich brauche die Benutzeroberfläche nicht wirklich, daher werde ich Node verwenden!Ich (Leah): Natürlich scheint Node ein guter Rahmen zu sein!John startet npm install packageName --savewie von README empfohlen. Dann node index.js.Knoten:Warnung: Um ein ES-Modul zu laden, setzen Sie "type": "module" in der package.json oder verwenden Sie die Erweiterung .mjs.
SyntaxError: Importanweisung kann nicht außerhalb eines Moduls verwendet werden
John: Aber ich habe kein package.json ...Leah: Führen Sie npm inites aus, es wird es generieren!John startet npm init, durchläuft den Installationsassistenten und fügt ihn manuell type: "module"der generierten package.json hinzu.John startet node index.js.Knoten:SyntaxError: Importanweisung kann nicht außerhalb eines Moduls verwendet werden
Seltsamerweise warf diesmal das interne Modul des Projekts einen Fehler aus. WAT ?!Leah: Zum Teufel, führen Sie es einfach in einem Browser aus. Dies ist das ES6-Modul. Es gibt nur einen sauberen JS-Algorithmus, der die Node-API nicht verwendet. Es sollte funktionieren.John erstellt eine einfache index.html-Seite mit einer Zeile <script type="module" src="index.js">und lädt sie in einen Browser.Nichts in der Konsole. TA Dah.Lea: Nun ja, Sie müssen den Modulpfad konfigurieren, um packageName zu importieren. Der Knoten führt spezielle Aktionen zum Auflösen durch aus node_modules. Daher müssen Sie im Browser den expliziten Pfad selbst angeben.John sieht sich seine Dateien an, aber dort gibt es kein Verzeichnis node_modules.Lea: Nun ja, du hast damit angefangen, npm installbevor du aufgetaucht bist package.json, wahrscheinlich ist das der Punkt! Versuch noch einmal!John startet John erneut npm install packageName --save: Oh, jetzt ist das Verzeichnis node_modules erschienen!John sucht verzweifelt nach einem Einstiegspunkt in node_modules. Dann bearbeitet es seine index.js entsprechend und lädt sie neu.Feuerfuchs:Falscher MIME-Typ: text / html
Lea: Natürlich öffnet es sich für dich file://! Mein Freund, wie lebst du in unserer Zeit ohne einen lokalen Gastgeber? Derzeit ist die Verwendung von Javascript für file://streng begrenzt.John: Aber warum bin ich ... Okay, ich werde einen lokalen Host betreiben.John führt localhost aus und öffnet seine index.html unter localhost : 80.Feuerfuchs:Falscher MIME-Typ: text / html
John (seufzt) . Müssen Sie localhost so konfigurieren, dass JS-Dateien mit dem Typ Text / Javascript ausgegeben werden?Lea: Was? Nein! Er weiß es. Hmm ... Sehen Sie sich die Registerkarte Netzwerke an. Ich vermute, dass er Ihr Modul nicht finden kann, also gibt er eine 404-HTML-Seite zurück und beschwert sich dann, dass diese Seite nicht ist text/javascript.Betrachtet erneut node_modules und korrigiert den Pfad. Es stellt sich heraus, dass VS Code Verzeichnisse mit nur einem Unterverzeichnis reduziert, sodass wir dies nicht bemerkt haben.Eigentlich denke ich, dass dies eine wirklich gute Verbesserung der Benutzerfreundlichkeit im Namen von VS Code ist, es verbessert die Effizienz, aber sie hätten die Dinge sichtbarer machen sollen.Feuerfuchs:SyntaxError: fehlt) nach formalen Parametern
Lea: Was? Dies ist aus dem Quellpaket, es ist nicht deine Schuld. Ich verstehe nicht ... Kann ich mir diese Zeile ansehen?John klickt auf die Zeile, dieLeas Fehler verursacht : Oh mein Gott. Dies ist kein Javascript, dies ist Typescript !!! Mit der Erweiterung .js !!!John: Ja, ich wollte nur eine Codezeile ausführen, um diesen Algorithmus zu testen ...John gibt auf. Er kommt zu dem Schluss, dass es am besten ist, die Node-, npm- oder ES6-Module niemals zu berühren.Das Ende.Bitte beachten Sie, dass John ein Informatiker ist, der viel über das Web weiß: Er hatte Node & npm installiert, er wusste, welche MIME-Typen es gab, er konnte localhost starten, wenn es gebraucht wurde. Worauf können Neulinge hoffen?