Mengapa kod ES6 tidak diterjemahkan ke ES5 apabila Vite membina perpustakaan JS?

Vite Membina Perpustakaan JS: Penyelesaian untuk Kod ES6 Tidak Diterjemahkan ke ES5

Apabila menggunakan Vite untuk membina perpustakaan JS, pemaju sering menghadapi masalah bahawa kod ES6 tidak diterjemahkan ke ES5, yang membawa kepada kesilapan keserasian dalam persekitaran pelayar lama. Artikel ini menganalisis kes dan menyediakan penyelesaian.

Dalam kes ini, pemaju menggunakan Vite untuk membina perpustakaan JS dan menggunakan operator gabungan nilai NULL ES6 (??), tetapi kod yang dibungkus masih mengandungi sintaks ES6, mengakibatkan ralat. Konfigurasi vite.config.js adalah seperti berikut:

 import {defineconfig} dari "Vite";
import Babel dari "@rollup/plugin-babel";

Eksport DefinectonFig lalai ({
  membina: {
    lib: {
      Kemasukan: "./lib/main.js",
      Nama: "Fastcodetest",
      nama fail: (format) => `fastcodetest. $ {format} .js`,
      Format: ["es", "umd"],
    },
  },
  RollupOptions: {
    Plugin: [
      babel ({
        Babelhelpers: "dibundel",
        tidak termasuk: "Node_modules/**",
        Pratetap: [
          [
            "@babel/preset-env",
            {
              sasaran: {
                Pelayar: "> 0.25%, tidak mati", // Tetapkan penyemak imbas sasaran},
              UseBuiltins: "entri",
              COREJS: 3,
            },
          ],
        ],
      }),
    ],
  },
});

Sebab akar masalah terletak pada targets: { browsers: "> 0.25%, not dead" } . Konfigurasi ini menetapkan penyemak imbas sasaran kepada penyemak imbas dengan bahagian lebih daripada 0.25% dan tiada penyelenggaraan telah dihentikan. Penyemak imbas moden menyokong ES6, jadi Babel tidak akan diterjemahkan.

Penyelesaian:

Untuk memastikan keserasian ES5, anda perlu mengubah suai konfigurasi targets untuk secara jelas menentukan pelayar versi yang lebih rendah, sebagai contoh:

 sasaran: {
  Penyemak imbas: ["iaitu> = 11", "2 versi terakhir", "tidak mati"] // atau nombor versi yang lebih spesifik}

Sebagai alternatif, untuk kawalan yang lebih berbutir, pertimbangkan untuk menggunakan senarai keserasian pelayar yang lebih komprehensif, seperti konfigurasi yang disediakan oleh browserslist . Di samping itu, sebab -sebab lain yang boleh menyebabkan kesilapan, seperti perbezaan versi persekitaran nod, perlu diketepikan. Hanya selepas faktor lain dikecualikan, konfigurasi Babel akan diselaraskan. Pastikan plugin @babel/preset-env dipasang dengan betul.

Dengan mengubah suai konfigurasi targets , Babel akan menerjemahkan kod ES6 dengan betul ke ES5, dengan itu menyelesaikan masalah keserasian. Ingat, memilih konfigurasi targets yang betul bergantung kepada julat sokongan penyemak imbas sasaran anda.

Atas ialah kandungan terperinci Mengapa kod ES6 tidak diterjemahkan ke ES5 apabila Vite membina perpustakaan JS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!