typescript 如何在Vite应用程序中使用Buffer,process?

ffscu2ro  于 2022-11-18  发布在  TypeScript
关注(0)|答案(1)|浏览(303)

我正在使用wagmi在 typescript React应用程序设置由维特。
我有些问题
“未定义全局”,“未定义缓冲区”
我用main.tsx中的一些代码又试了一次:

import { Buffer } from 'buffer';
import process from 'process';

window.global = window;
window.Buffer = Buffer;
window.process = process;

但我还是得到了一些错误ex:模块“process”已外部化以实现浏览器兼容性.无法访问客户端代码中得“process.versions.”
当我连接到coinbase或walletconnect连接器时出错。
我的视频配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 5000,
  },
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],
  },
  define: {
    // global: 'window',
    // Buffer: Buffer,
    // process: process,
  },
});
rsaldnfx

rsaldnfx1#

要使缓冲区进程正常工作,请执行以下操作:
1.安装缓冲区和进程:npm install buffer process
1.编辑index.html以添加一些js:

<!-- node // buffer-->
<script>window.global = window;</script>
<script type="module">
    import { Buffer } from "buffer/"; // <-- no typo here ("/")
    import process from "process";
   
    window.Buffer = Buffer;
    window.process = process;
</script>

1.编辑您的vite.config.js以添加resolve.alias选项:

export default defineConfig({
  [...]

  resolve: {
    alias: {
      process: "process/browser"
    }
  }
})

1.在您的组件中,导入缓冲区(注意/):

import { Buffer } from 'buffer/'

[...]

stackblitz上的Live示例,打开控制台devtools预览,查看Uint8Array调试行。
您可以读取my old answer,以便进一步设置进程、事件甚至加密。

相关问题