使用vite/rollup.js來擴充Node.js的os模組
P粉176151589
P粉176151589 2023-08-24 16:17:55
0
2
413

我正在處理一個使用opensea-js套件的Vite專案。這個套件依賴xhr2-cookies,它匯入了oshttphttpshttp、https和其他其他一些內部的node模組。

當我嘗試呼叫任何opensea方法時,出現了以下錯誤:

Uncaught (in promise) TypeError: os.type不是一個函數 XMLHttpRequest2 xml-http-request.ts:102 prepareRequest httpprovider.js:61 sendAsync httpprovider.js:116 node_modules opensea-js.js:24209

追蹤這個錯誤,發現它來自建構用戶代理字串。

我嘗試安裝rollup-plugin-polyfill-node並將其添加到vite.config.js中,但仍然出現相同的錯誤:< ;/p>

import path 從 'path' import vue from '@vitejs/plugin-vue' import nodePolyfills from 'rollup-plugin-polyfill-node' import { defineConfig } from 'vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, server: { port: 8080, }, define: { 'process.env': {}, }, build: { rollupOptions: { plugins: [ nodePolyfills(), ], }, }, })

我還嘗試使用patch-package手動修復文件,這樣可以解決os錯誤,但在嘗試發送請求時失敗(因為它使用需要進行polyfill的http/https模組)。

P粉176151589
P粉176151589

全部回覆 (2)
P粉863295057

我使用了rollup-plugin-polyfill-node來解決這個問題。

import nodePolyfills from 'rollup-plugin-polyfill-node'; rollup({ entry: 'main.js', plugins: [ nodePolyfills( /* options */ ) ] })

這是基於Fabiano的答案的更完整的解決方案:

// yarn add --dev @esbuild-plugins/node-globals-polyfill import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill' // yarn add --dev @esbuild-plugins/node-modules-polyfill import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill' import nodePolyfills from 'rollup-plugin-polyfill-node'; export default { optimizeDeps: { esbuildOptions: { // Node.js global to browser globalThis define: { global: 'globalThis' }, // Enable esbuild polyfill plugins plugins: [ NodeGlobalsPolyfillPlugin({ process: true, buffer: true }), NodeModulesPolyfillPlugin() ] } }, build: { rollupOptions: { plugins: [ // Enable rollup polyfills plugin // used during production bundling nodePolyfills() ] } } }
    P粉720716934

    在我的專案中,我使用了以下配置來解決問題。我在一篇簡短的文章中描述了解決方案。

    // yarn add --dev @esbuild-plugins/node-globals-polyfill import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill' // yarn add --dev @esbuild-plugins/node-modules-polyfill import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill' // You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill import rollupNodePolyFill from 'rollup-plugin-node-polyfills' export default { 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() ] } }, build: { rollupOptions: { plugins: [ // Enable rollup polyfills plugin // used during production bundling rollupNodePolyFill() ] } } }
      最新下載
      更多>
      網站特效
      網站源碼
      網站素材
      前端模板
      關於我們 免責聲明 Sitemap
      PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!