사이트 '글로벌이 정의되지 않았습니다'

사이트 '글로벌이 정의되지 않았습니다'

나는 바닐라-ts와 함께 Vite를 사용하여 프로젝트를 만들고 있는데, 한 때 나는 그것을 사용해야 했습니다.readdir의 fs-extra패키지, 그러나 그것은 다음과 같은 오류가 발생했습니다.process is not defined어떤 사람들은 내게 이 코드를 넣으라고 제안했습니다.vite-config.ts파일 이름:

import { defineConfig } from 'vite'

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

초기 오류를 수정했지만 다음과 같은 오류가 새로 생성되었습니다.global is not defined와 더많은연추가통를해와구통▁adding해▁more를가를 추가함으로써.'global': {}에서.defineobject는했습니다.Cannot read properties of undefined (reading 'substr')

사용된 코드:

import { readdirSync } from 'fs-extra';

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

방문 버전: ^2.9.5

FS-추가 버전: ^9.0.13

문제는 vite가 필드를 정의하지 않기 때문입니다.window웹팩이 하는 것처럼.그리고 몇몇 도서관들은 웹팩이 vite보다 훨씬 더 오래되었기 때문에 그것에 의존합니다.

라이브러리를 가져오기 전에 처음부터 삽입하기만 하면 됩니다.

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

가져오기 전에 위의 코드를 갖는 좋은 방법은 새 파일에 쓰는 것입니다.init.js먼저 가져오기를 수행합니다.

// in index.js or main.js file

import "./init"
// import your app and libraries after... 
import App from './App'
import ...

보다 부드러운 솔루션:

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

오, 감사합니다, 패트릭 휘블 네슈쿠들라!

제게 효과가 있었던 것은 글로벌을 정의하는 것이었습니다. 이런 식으로 글로벌에 따라 라이브러리를 정의하는 것이었습니다.뭔가 작동했습니다(예: lodash used global.is Finite()) – Patrick Hübl-Neschkudla 2022년 9월 13일 8:27

나는 이 문제로 2시간 동안 고생했고 마침내 당신에게서 해결책을 찾았습니다.

문제는 AWS Authenticator가 vite config에서 'global'을 정의해야 하는 Buffer 패키지를 사용해야 한다는 것이었고, 글로벌을 선언하는 Phaser 패키지도 사용했습니다.메인 페이저.JS 코드에 있는 무언가.

vite config에 정의된 'global'에서 'npm run build'를 실행하면 'global: blah blah'를 선언하는 부분에 예기치 않은 토큰이 있다고 하여 페이즈기를 컴파일할 때 실행에 실패했습니다.

vite config에서 'global'을 정의하지 않으면 'npm run build'가 실패하지 않지만 AWS Authenticator가 작동하지 않고 buffer에 'global'이 정의되지 않았다고 말하며 console.error를 던집니다.

설정

define: {global: 'window'}

invite.config는 이 문제를 해결했습니다.

https://gist.github.com/FbN/0e651105937c8000f10fefdf9ec9af3d, 을 참조하면서 저는 다음과 같은 것을 깨달았습니다.

1. 이슈는 esbuild에 특화된 것처럼 보였습니다.
2. 제가 고칠 수 있는 것은:

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

해결책은 아래 코드를 main.js 또는 index.js에 추가하는 것입니다.

declare global {
  interface Window {
    global: any;
  }
}

if (typeof window !== "undefined") {
  window.global = window;
}

여기서 언급한 바와 같이, 나는 내 안에서 정의했습니다.vite.config.ts파일. 개발에 사용할 수 있었지만 빌드에 오류가 발생했습니다.

1 - 개발 오류 수정:

간단히 말해서, 나는 덧붙였습니다.global조건부로 생산에 사용하면 빌드에 장애가 발생하기 때문입니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig(({ mode }) => {
  const config = {
    plugins: [react()],
    define: {} as any,
  };

  if (mode === "development") {
    config.define.global = {};
  }

  return config;
});

2 - 생산 오류 수정:

저의 경우 리액트 앱이었고, 아래의 스니펫을 상단에 추가했습니다.main.tsx파일:

window.global ||= window;

이것으로 저는 그 문제를 해결했습니다.

내 vite.config.js 안에, 나는 이것을 추가했습니다.

// ...every other thing, 
define: {
    global: {},
    "process.env": {}
  }

최종 파일은

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

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

vite 구성 내부에 빈 전역을 설정하면 다음과 같은 다른 라이브러리가 손상될 수 있습니다.react-pdf그래서 가장 좋고 쉬운 방법은 그것을 당신의 것에 추가하는 것입니다.index.html파일은 다음과 같습니다.

<script>
    if (global === undefined) {
      var global = window;
    }
  </script>

변수와 관련된 오류가 2개 발생할 수 있습니다.global

1: global is not define
2. _global is not define

vite.js에서 이 두 가지 오류가 발생하면 다음과 같이 해결할 수 있습니다. '

export default defineConfig({
  build: {
    sourcemap: true,
  },
  define: {
    _global: {},
  },
  plugins: [react(), EnvironmentPlugin(['VITE_APP_TEXT'])],
  publicDir: 'public',
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, 'src') }],
  },
  server: {
    host: true,
    port: 3000,
  },
})

and updateindex.dll' 기준:

if (typeof window !== "undefined") {
    window.global = window;
}

프론트엔드 프로젝트에 Vite를 사용할 가능성이 높습니다. fs-extra(파일 액세스) / global(nodejs global)은 브라우저(프런트엔드)에 존재하지 않습니다.

고치다

백엔드 프로젝트를 사용하고 Vite/frontend에서 사용하여 서버에서 파일 시스템을 변경할 수 있는 API를 내보냅니다.

언급URL : https://stackoverflow.com/questions/72114775/vite-global-is-not-defined