如何从node_modules导入Javascript文件以使用Vite进行反应？

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

如果您需要一个URL而不是一个工作人员，我的解决方案就是从节点模块导入javascript文件。维特会处理的

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>

Answer 2

通过将?worker附加到导入路径中，您可以将脚本作为Web工作人员导入：

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

不需要配置。