如何在 Vite 开发服务器中填充 "process" 节点模块？

Question

在我的Vite项目中，我依赖于一个在其功能之一中使用processNode全局的模块。我没有从我的代码中调用这个函数，但是Vite dev服务器在导入模块时仍然给我这个错误:

Uncaught ReferenceError: process is not defined

有趣的是，当我创建一个生产版本时，我没有看到这个错误。

我如何用no-op填充process，以便Vite开发服务器停止失败?

Answer 1

另一种选择是添加到index.html

<script type="module">
import process from 'process';
window.process = process;
</script>

Answer 2

我使用node-stdlib-browser，它对我来说工作得很好。

下面是我最后的vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import nodeStdlibBrowser from 'node-stdlib-browser'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import inject from '@rollup/plugin-inject'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// https://github.com/antfu/unplugin-auto-import#configuration
AutoImport({
dts: 'src/auto-import.d.ts',
imports: ['vue', 'vue-router'],
eslintrc: {
enabled: true,
},
}),
// https://github.com/antfu/unplugin-vue-components#configuration
Components({
dts: 'src/components.d.ts',
}),
// https://github.com/niksy/node-stdlib-browser#vite
{
...inject({
global: [require.resolve('node-stdlib-browser/helpers/esbuild/shim'), 'global'],
process: [require.resolve('node-stdlib-browser/helpers/esbuild/shim'), 'process'],
Buffer: [require.resolve('node-stdlib-browser/helpers/esbuild/shim'), 'Buffer'],
}),
enforce: 'post',
},
],
resolve: {
alias: { '@': path.resolve(__dirname, 'src'), ...nodeStdlibBrowser },
},
optimizeDeps: {
esbuildOptions: {
target: 'esnext', // Enable Big integer literals
},
},
build: {
target: 'esnext', // Enable Big integer literals
commonjsOptions: {
transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
},
},
})

Answer 3

我今天在一个使用rollup + vite的React项目中遇到了同样的问题，下面是我如何解决它的，使用Fabiano Taioli的这篇文章。

Vite需要Node.js的多边形

你需要添加一些填充插件，以允许节点全局，如process。幸运的是，您只需编辑(或创建)vite.config.js。

示例vite.config.js

下面是一个例子，其中包括使用NodeGlobalsPolyfillPlugin填充process。它还包括许多其他节点全局变量，因此可以随意删除。

import { defineConfig } from 'vite';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
import ReactPlugin from 'vite-preset-react';
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
// This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
// see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
// process and buffer are excluded because already managed
// by node-globals-polyfill
util: 'rollup-plugin-node-polyfills/polyfills/util',
sys: 'util',
events: 'rollup-plugin-node-polyfills/polyfills/events',
stream: 'rollup-plugin-node-polyfills/polyfills/stream',
path: 'rollup-plugin-node-polyfills/polyfills/path',
querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
url: 'rollup-plugin-node-polyfills/polyfills/url',
string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
http: 'rollup-plugin-node-polyfills/polyfills/http',
https: 'rollup-plugin-node-polyfills/polyfills/http',
os: 'rollup-plugin-node-polyfills/polyfills/os',
assert: 'rollup-plugin-node-polyfills/polyfills/assert',
constants: 'rollup-plugin-node-polyfills/polyfills/constants',
_stream_duplex:
'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
_stream_passthrough:
'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
_stream_readable:
'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
_stream_writable:
'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
_stream_transform:
'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
timers: 'rollup-plugin-node-polyfills/polyfills/timers',
console: 'rollup-plugin-node-polyfills/polyfills/console',
vm: 'rollup-plugin-node-polyfills/polyfills/vm',
zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
tty: 'rollup-plugin-node-polyfills/polyfills/tty',
domain: 'rollup-plugin-node-polyfills/polyfills/domain',
},
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: 'globalThis',
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
plugins: [
ReactPlugin({
injectReact: false,
}),
rollupNodePolyFill(),
],
});

需要的开发依赖

要使上面的例子正常工作，你需要添加一些依赖项。特别是:

yarn add --dev vite-preset-react
yarn add --dev @esbuild-plugins/node-modules-polyfill
yarn add --dev @esbuild-plugins/node-globals-polyfill

Answer 4

请使用" esbuild-plugin-polyfill-node "插件。https://npm.io/package/esbuild-plugin-polyfill-node这为我解决了问题，不需要在脚本标签中手动添加和分配global = window。