如何从 React 应用程序中的公用文件夹导入文件？

Question

我在公共文件夹中有一个 javascript 文件，我想将该文件导入到文件夹 src/components 中的组件。

 projectFolder
  publicFolder
    index.html
    recorder.js
  srcFolder
    componentsFolder
       Speech.js
       Speech.css

但是我不能在我的组件中做这样的事情：

 import Recorder from '../../public/recorder'

因为我收到以下错误：

未找到模块：您试图导入项目 src/ 目录之外的 ../../public/recorder。不支持 src/ 之外的相对导入。您可以将它移动到 src/ 中，或者从项目的 node_modules/ 添加一个符号链接到它。

据我所知，不允许在 /src 目录之外导入，所以我想知道如何“添加符号链接”，或者您是否知道其他修复方法。

原文由 Joe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我相信您正在使用 create-react-app …这是 ModuleScopePlugin 中包含的一项功能，您可以通过弹出应用程序并编辑您的 webpack 配置来禁用它（如 本答案中 所述）。

但请注意，该功能的存在是有原因的。 create-react-app 构建工具仅处理 src/ 目录，因此例如您在此处之外的 JavaScript 将不会被 Babel 转译。此外，如果您使用像 Webpack 这样的捆绑器，您通常会尝试避免污染全局范围。因此，除非您有一个非常具体的原因需要这样做，否则我会说尝试移动它。

原文由 djfdev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 rescripts 库 修改 react-scripts 配置

在您的根文件夹中创建一个名为 .rescriptsrc.js 的文件：

 module.exports = config => {
  const scopePluginIndex = config.resolve.plugins.findIndex(
    ({ constructor }) => constructor && constructor.name === "ModuleScopePlugin"
  );

  config.resolve.plugins.splice(scopePluginIndex, 1);

  return config;
};

原文由 Lukas 发布，翻译遵循 CC BY-SA 4.0 许可协议