如何在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目录之外导入，所以我想知道如何“添加符号链接”，或者您是否知道其他方法来修复它。

Answer 1

如果您可以不使用public中的实际文件并在src目录中拥有重复的js文件，如果您使用vscode，则有一个简单但很酷的解决方案。此vscode扩展https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave允许您在保存时触发命令（您可以使用regex指定哪些文件保存应触发哪些命令），并且您可以指定在保存时运行的命令：

{
    "match": "public\\\\recorder.js$",
    "cmd": "copy ${file} ${workspaceFolder}\\src\\recorder.js"
}

现在，您可以从该复制文件导入。

Answer 2

您可以使用rescripts库修改react脚本config

创建一个名为的文件。说明。js在您的根文件夹中：

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

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

  return config;
};

Answer 3

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

但是要小心，这个功能的存在是有原因的。create-react-app-build工具只处理src/目录，因此，例如，您在此处之外的JavaScript不会被Babel传输。此外，如果你使用的是像捆绑包一样的网页包，你通常会试图避免污染全球范围。所以，除非你有一个非常具体的理由，为什么你需要这样做，我会说，试着移动它。