Membetulkan ralat vite untuk reactjs - global tidak ditakrifkan dan proses tidak ditakrifkan

Dalam senario di mana anda menjalankan apl vite dengan templat reactjs untuk projek dan cuba mengambil pembolehubah persekitaran daripada fail .env. Sebagai cara popular untuk mengambil pembolehubah persekitaran daripada .env ialah menggunakan process.env.SOMETHING untuk pembolehubah sebagai:

SOMETHING=SECRETSAUCE

Pada ketika ini vite.config.ts akan kelihatan seperti:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Tetapi pengambilan pembolehubah tidak berfungsi serta-merta, dan terdapat banyak cara untuk menyelesaikan isu tersebut. Saya mencuba kebanyakannya dan saya rasa berpegang pada cara yang mudah dan lurus ke hadapan.

Mungkin dengan takrifan di atas dan logik pengambilan lalai dengan process.env.*, anda mungkin mendapat ralat Rujukan Tidak DitangkapRalat: global tidak ditakrifkan.

Saya dapati banyak rujukan dalam stackoverflow dan saya keliru.

Pembetulan ralat adalah dengan mentakrifkan global dalam konfigurasi seperti di bawah.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
})

Kini, ini mungkin akan membawa kepada satu lagi ralat yang lebih biasa Ralat Rujukan Tidak Ditangkap: proses tidak ditakrifkan.

Sekali lagi, terdapat banyak penyelesaian di web dan ada yang sudah lapuk. Saya dapati yang paling relevan dan mudah untuk dilaksanakan ialah mengimport loadEnv daripada perpustakaan vite dan membina logik tersuai seperti di bawah.

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      global: {},
      'process.env': env
    },
    plugins: [react()],
  }
})

Dan keajaiban berlaku serta-merta!!

Selain itu, kita tidak perlu menggunakan kebergantungan dotenv kerana pengambilan pembolehubah persekitaran dalam kod dengan process.env.* berfungsi dengan baik tanpanya.

Selamat pengekodan!

Atas ialah kandungan terperinci Membetulkan ralat vite untuk reactjs - global tidak ditakrifkan dan proses tidak ditakrifkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!