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!