Vite '全局未定義'

Question

我正在使用帶有 vanilla-ts 的 Vite 創建一個項目，有一次我不得不使用fs-extra package 中的readdir方法，但它創建了一個錯誤，說process is not defined ，有人建議我將這段代碼放在我的vite-config.ts中vite-config.ts文件：

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    'process.env': {}
  }
})

這修復了初始錯誤但創建了一個新的讀取global is not defined的新錯誤，更多研究並通過添加'global': {}在define object 上，就像之前修復錯誤但創建了另一個說Cannot read properties of undefined (reading 'substr')

使用的代碼：

import { readdirSync } from 'fs-extra';

const folders = readdirSync('./', { withFileTypes: true })
  .filter(dir => dir.isDirectory);

Vite版本：^2.9.5

FS-額外版本：^9.0.13

Answer 1

您很可能將 Vite 用於前端項目。 fs-extra（文件訪問）/全局（nodejs 全局）不是瀏覽器（前端）中存在的東西。

使固定

使用后端項目並導出 API，然后您可以從 Vite / 前端使用它來更改服務器上的文件系統。

Answer 2

問題是因為vite global像 webpack 那樣在window中定義全局字段。 一些庫依賴它，因為 webpack 比 vite 更老。

只需在一開始，在任何庫導入之前插入：

// init.js
window.global ||= window;

在任何導入之前擁有上述代碼的一個好方法是寫入新文件，我們將其命名為init.js ，然后將其作為第一個導入。

// index.js or main.js
import "./init"
// import your app and libraries after... 
import App from './App'
import ...

Answer 3

更溫和的解決方案：

  export default defineConfig({
    define: {
          global: {},
        },
  })

Answer 4

天啊，謝謝你， Patrick Hübl-Neschkudla ！

對我有用的是定義 global: 'window'，這樣，依賴於 global.something 的庫就起作用了（例如 lodash 使用 global.isFinite() 會拋出錯誤）——Patrick Hübl-Neschkudla 2022 年 9 月 13 日 8:27

我在這個問題上苦苦掙扎了 2 個小時，終於從你那里找到了解決方案。

對我來說，問題是，AWS Authenticator 需要使用 Buffer package，這需要在 vite 配置上定義“全局”，而我還有 Phaser package，它在其主要的 phaser.js 代碼中聲明了 global.somethingsomething。

在 vite 配置中定義了 'global'，編譯 Phaser 時運行 'npm run build' 失敗，說在它聲明 'global: blah blah' 的部分有意外的標記。

當我沒有在 vite 配置中定義 'global' 時，'npm run build' 不會失敗，但是 AWS Authenticator 將無法工作並拋出 console.error，說 'global' 沒有在 Buffer 中定義。

環境

define: {global: 'window'}

在 vite.config 中解決了這個問題。

Answer 5

參考https://gist.github.com/FbN/0e651105937c8000f10fefdf9ec9af3d ，我意識到：

1. 這個問題似乎是 esbuild 特有的
2. 我可以用以下方法修復它：

export default defineConfig({
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis'
        }
      }
    }
  })