Next.js

Question

我正在使用一个应用程序，该应用程序使用 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）。

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

提前致谢！

Answer 1

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

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

这是 how to set up a custom webpack config 上 Next.js 上的文档。

next.config.js


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

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // 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 是否会自动生成缺少的目录，如果它们在构建时不存在的话。

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

Next.js - best way to serve static JS from a node module's "dist" folder

javascript

tesseract

node.js

webpack