React - 如何在编译/构建时而不是运行时运行 node_modules 包？

Question

我在我创建的自定义 npm 包中使用 find-up 将配置数据从项目根目录加载到 npm 包中。我遇到的问题是 file-up 使用了 fs 模块，它只在编译时运行。当我尝试将 npm 包与项目一起使用时，它会因为找不到 fs 包而失败。

该项目是一个 Next.js 应用程序。

所以基本上，在根 project 目录中，我有一个配置文件（我们称之为myConfig.js）。

我已经为这个项目安装了一个 npm 包（我们称之为myPackage）。

在node_modules/myPackage/index.js 中有代码将myConfig.js 中导出的对象与node_modules/myPackage/defaultConfig.js 中的默认配置文件合并。

这个新合并的配置文件随后被node_modules/myPackage/components/... 中的其他组件使用。然后我将组件导入我的应用程序。例如，我可能在pages/index.js 中有import CoolComponent from "myPackage"。

由于配置的合并是在运行时完成的，并且它需要 fs 模块，因此失败并显示无法找到 fs 模块的错误。我想做的是能够在编译时运行它，但我不知道该怎么做。

代码如下：

// node_modules/myPackage/index.js

import findUp from "find-up";
import deepMerge from "deepmerge";
import defaultConfig from "./defaultConfig";

const config = (() => {
  const path = findUp.sync("myConfig.js");
  if (path && path.length) {
    const userConfigModule = module.require(path);
    return deepMerge(defaultConfig, userConfigModule);
  }
  return defaultConfig;
})();

export default config;

同样，我也希望能够在编译期间从 CMS 获取，因为在运行期间获取会显着减慢初始加载时间，并且获取的数据不会经常更改。

我该怎么做？

Answer 1

可以使用提供的example进行Next.js的配置管理

在next.config.js

import findUp from "find-up";
import deepMerge from "deepmerge";
import defaultConfig from "./defaultConfig";

const config = (() => {
  const path = findUp.sync("myConfig.js");
  if (path && path.length) {
    const userConfigModule = module.require(path);
    return deepMerge(defaultConfig, userConfigModule);
  }
  return defaultConfig;
})();

module.exports = {
    env: {
      ...config
   }
}

然后你可以通过process.env.YOUR_VARIABLE访问你的变量