Warum wird ES6 -Code nicht in ES5 übersetzt, wenn die JS -Bibliothek die JS -Bibliothek erstellt?

Vite Builds JS -Bibliothek: Lösung für ES6 -Code nicht übersetzt in ES5 übersetzt

Bei Verwendung von VITE zum Erstellen von JS -Bibliotheken treten Entwickler häufig auf Probleme auf, dass ES6 -Code nicht in ES5 übersetzt wird, was zu Kompatibilitätsfehlern in der alten Browserumgebung führt. Dieser Artikel analysiert einen Fall und liefert Lösungen.

In diesem Fall verwendete der Entwickler VITE, um die JS -Bibliothek zu erstellen und den Null Value Merge -Operator von ES6 (??) zu verwenden, aber der verpackte Code enthält immer noch die ES6 -Syntax, was zu einem Fehler führt. Die Konfiguration der vite.config.js lautet wie folgt:

 importieren {definconfig} aus "vite";
import babel aus "@rollup/plugin-babel";

Standard default DefinoConfig ({{
  bauen: {
    lib: {
      Eintrag: "./lib/main.js",
      Name: "Fastcodetest",
      Dateiname: (Format) => `fastCodetest. $ {format} .js`,,
      Formate: ["es", "umd"],
    },
  },
  Rollupoptions: {
    Plugins: [
      Babel ({{
        Babelhelpers: "gebündelt",
        ausschließen: "node_modules/**",
        Voreinstellungen: [
          [
            "@babel/preset-env",
            {
              Ziele: {
                Browser: "> 0,25%, nicht tot", // Setzen Sie den Zielbrowser},
              UseBuiltins: "Eintrag",
              CoreJS: 3,
            },
          ],
        ],
      }),
    ],
  },
});

Die Grundursache des Problems liegt in targets: { browsers: "> 0.25%, not dead" } . Diese Konfiguration setzt den Zielbrowser auf einen Browser mit einem Anteil von mehr als 0,25% und es wurde keine Wartung gestoppt. Moderne Browser unterstützen ES6 nativ, so dass Babel nicht übersetzt wird.

Lösung:

Um die Kompatibilität der ES5 sicherzustellen, müssen Sie targets ändern, um die Browser mit niedrigerer Versionen explizit anzugeben, z. B.:

 Ziele: {
  Browser: ["IE> = 11", "Letzte 2 Versionen", "nicht tot"] // oder spezifischeren Versionsnummer}

Alternativ können Sie für eine stärkere Kontrolle über eine umfassendere Liste der Browser -Kompatibilität in Betracht ziehen, z. B. die von browserslist bereitgestellte Konfiguration. Darüber hinaus müssen andere Gründe, die zu Fehlern führen können, wie z. B. Unterschiede in der Node -Umgebung, ausgeschlossen werden. Erst wenn andere Faktoren ausgeschlossen sind, wird die Babel -Konfiguration angepasst. Stellen Sie sicher, dass das Plugin @babel/preset-env ordnungsgemäß installiert ist.

Durch Ändern targets übersetzt Babel den ES6 -Code korrekt in ES5, wodurch das Kompatibilitätsproblem gelöst wird. Denken Sie daran, dass die Auswahl der richtigen targets vom Unterstützungsbereich Ihres Zielbrowsers abhängt.

Das obige ist der detaillierte Inhalt vonWarum wird ES6 -Code nicht in ES5 übersetzt, wenn die JS -Bibliothek die JS -Bibliothek erstellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!