Viteでpolyfillを追加する方法
もともとParcel 2を利用していましたが、自分のプロジェクトではReactのLazy importをするとHMRが働かないことがあり、Viteも気になっていたため移行することにしました。
Parcelではpolyfillも自動で追加してくれていたので、気にしてなかったのですが、Viteでは自分で追加する必要があるようです。
私の場合は、csv-parse というライブラリをブラウザで使っており、それが内部で streamやprocessなどを参照していました。
まず、esbuildのpolyfillを追加するプラグインが必要です。
@esbuild-plugins/node-globals-polyfill, @esbuild-plugins/node-modules-polyfill
yarn add --dev @esbuild-plugins/node-globals-polyfill @esbuild-plugins/node-modules-polyfill
それをViteのconfigに紐づけてあげることで、Polyfillできます。
/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import * as path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'src/': path.join(__dirname, 'src/'),
stream: 'rollup-plugin-node-polyfills/polyfills/stream',
_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'
}
},
optimizeDeps: {
esbuildOptions: {
define: {
global: 'globalThis'
},
// Enable esbuild polyfill plugins
// https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true
})
]
}
},
build: {
target: 'esnext'
}
})
こちらの記事がとても参考になります。その他のpolyfillを追加する場合など、以下を参考にするといいと思います。
ただ、自分の場合はこれだけでは動かなくて Buffer を追加する必要がありました。
Bufferのpolyfillを追加するには、vite.config.tsではなく直接コードに追加する必要があるようです。
これをトップレベルのファイルにimportさせることで解決できました。
import { Buffer } from 'buffer'
// for csv-parse polyfill
// https://github.com/vitejs/vite/discussions/2785
globalThis.Buffer = Buffer
Author And Source
この問題について(Viteでpolyfillを追加する方法), 我々は、より多くの情報をここで見つけました https://zenn.dev/kra8/articles/c9ed05abb90d60著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol