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

Question

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

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

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

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

因为我收到以下错误:

Module not found: You attempted to import ../../public/recorder which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

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

Answer 1

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

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