你如何使用 Vite 从 node_modules 导入 Javascript 文件到 React 中？

Question

在我的例子中，如何从 node_modules 加载静态资源 pdf.js（从 node_modules 的构建文件夹），这样我就不必每次都设置版本我更新了。

我正在从 Webpack 迁移到 Vite，所以这就是我目前在我的 webpack 项目中使用它的方式。

<Worker workerUrl="/pdf.worker.bundle.js">

Webpack 配置

'pdf.worker': path.join(__dirname, '../node_modules/pdfjs-dist/build/pdf.worker.js'),

寻找 Vite 等价物

我的Vite配置文件和原版没有区别

我尝试过的事情：

我想做一个服务工作者，但这似乎比我正在寻找的更复杂。

Answer 1

您可以通过将 ?worker 附加到导入路径来将脚本导入为 Web Worker：

import PdfJsWorker from 'pdfjs-dist/build/pdf.worker.js?worker'
const worker = new PdfJsWorker()

无需配置。

Answer 2

如果您需要 URL 而不是工人，我的解决方案只是从节点模块导入 javascript 文件。 Vite 会处理这个

import WorkerPdfJsUrl from 'pdfjs-dist/build/pdf.worker?url'

<Worker workerUrl={WorkerPdfJsUrl} >
  <div
    style={{
      height: '750px',
      width: '900px',
      marginLeft: 'auto',
      marginRight: 'auto',
    }}
  >
    <Viewer
      theme='light'
      fileUrl={pdfFile}
      plugins={[defaultLayoutPluginInstance]}
    />
  </div>
</Worker>

你如何使用 Vite 从 node_modules 导入 Javascript 文件到 React 中？

How do you import Javascript file from node_modules into react using Vite?

pdf.js

reactjs

webpack

react-pdf

vite

我尝试过的事情：