ES6 通过 webpack 外部从 JSON 字符串导入答案

【问题标题】：ES6 import from a JSON string literal via webpack externalsES6 通过 webpack 外部从 JSON 字符串导入
【发布时间】：2021-01-21 15:19:38
【问题描述】：

问题：为什么 import 不解析我作为 webpack externals 成员提供的 JSON 字符串？

我有一组需要共享 JSON 配置文件的 React 应用程序，我希望 webpack (v4) 在构建期间内联到每个应用程序中。根据this 之类的答案以及此article 中的“使用Webpack”部分之类的类似示例，看起来这应该可以工作，但是JSON 字符串作为字符串值导入，它不会被解析为对象。

JSON：

{ "api": "https://localhost:5050/api" }

Webpack（修改另一个包生成的配置）：

config.externals.push({
  'AppConfig': JSON.stringify(require(path.resolve(configPath, "app-config.json")))
});

模块：

import Config from 'AppConfig';

我正在使用一个组件来读取 OpenAPI 架构：

<ApiService schema={Config.api}> ...

错误显示未解析 JSON，它是作为字符串文字导入的：

GET https://localhost:9000/%7B%22api%22:%22https://localhost:5050/api%22%7D net::ERR_ABORTED 404
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

显然，webpack 配置有效。而且我知道配置本身很好，如果我将import 更改为直接引用 JSON 文件，它会按预期工作。但这需要使用大量 ../../../ 我试图避免的相对路径垃圾。我也对 .js 文件中的 export default 方法不感兴趣，我看到人们使用这种方法来解决类似问题。

我是否在某个地方缺少 webpack 或 Babel 插件？

【问题讨论】：

如果你写了一个resolve.alias 对一个导入 JSON 文件的好地方的模块怎么办？这将避免相对路径的问题，同时在代码库中为您提供一个管理配置的位置。还有其他方法，但我觉得这很适合您的用例。
@JuhoVepsäläinen webpack repo 中的某个人提出了同样的建议。我曾尝试将path.resolve 和path.relative 与exports 一起使用，但由于某种原因导致尝试在运行时从服务器读取文件作为模块，但效果不佳。但我肯定会在周一给alias 一个工作机会。谢谢。

标签： webpack ecmascript-6

【解决方案1】：

解决方案是使用带有相对路径的alias。额外的path 步骤是因为这是在一个实用程序module.exports 中，它修改了现有的 webpack 配置对象。 npm_config_top_dir 环境变量特定于我们的 monorepo 设置（Lerna 运行这些脚本，共享配置文件位于该根目录中）。

const pathToCallerSourceCode = path.resolve(process.cwd(), "./src");
const appConfigFullPathname = path.resolve(process.env.npm_config_top_dir, "app-config.json");
const appConfigRelativePathname = path.relative(pathToCallerSourceCode, appConfigFullPathname);

Object.assign(config.resolve, { alias: { AppConfig: appConfigRelativePathname }});

【讨论】：