如何在react应用程序中从公用文件夹导入文件？

Question

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

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

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

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

因为我得到了以下错误：

模块未找到:您试图导入项目src/目录之外的../../public/记录器。不支持src/之外的相对导入。您可以将其移动到src/中，也可以从项目的node_modules/向其添加一个符号链接。

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

Answer 1

我相信你在使用创建-反应-应用程序.这是ModuleScopePlugin中包含的一个功能，您可以通过弹出应用程序和编辑webpack配置(如在这个答案中描述)来禁用它。

但是要小心，这个特性的存在是有原因的。创建-反应-应用程序构建工具只处理src/目录，因此这里之外的JavaScript不会被Babel传输。此外，如果你使用的是Webpack这样的捆绑器，你通常会试图避免污染全球范围。所以，除非你有一个非常具体的理由，你需要这样做，我会说，试着移动它。

Answer 2

可以使用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;
};

Answer 3

如果您不需要在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"
}

现在您可以从复制的文件中导入。