Next.js - 从节点模块的“dist”文件夹提供静态 JS 的最佳方式

我正在使用一个使用 Tesseract (OCR) 从图像中读取文本的应用程序。

我想从 node_modules/tesseract.js/dist 获取一些 JS 文件，并使它们可以在浏览器中下载。

我知道我可以将文件复制到 ./public，next.js 将从那里静态提供它，但是如果我更新我的 Tesseract 版本，我可能也需要更新这些文件。那么维护就成了一个问题。

我的第一个想法是自定义我的 webpack 配置以将文件从 node_modules/tesseract.js/dist 复制到 ./public/tesseract （或类似的东西）。如果我更新 Tesseract，这将确保文件被重新复制。但我对 webpack 并不是特别精通，而且还没有弄清楚如何做到这一点。

我的第二个想法是“代理”JS 文件内容的检索，并将内容作为 next.js 中的“页面”提供（但这看起来超级 hacktastic）。

我觉得这不应该那么复杂……但我自己还没有弄清楚。

提前致谢！

是的同意，更新您的服务器以服务node_modules路径听起来有点危险。

我个人只会像您提到的那样使用 webpack 复制这些文件。

以下是 Next.js 上的文档如何设置自定义 webpack 配置 https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config.

next.config.js

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  webpack: (config) => {
    // append the CopyPlugin to copy the file to your public dir
    config.plugins.push(
      new CopyPlugin({
        patterns: [
          { from: "node_modules/tesseract.js/dist", to: "public/" },
        ],
      }),
    )

    // Important: return the modified config
    return config
  }
};

我故意不包括public/tesseract路径，我不确定是否CopyPlugin如果构建时不存在，将自动生成缺失的目录。