Question

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

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

但是我无法在组件中执行以下操作：

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

因为出现以下错误：

未找到模块：您试图导入../../public/recorder 不在项目src /目录中。国外相对进口不支持src /。您可以将其移动到src /中，也可以添加从项目的node_modules /指向它的符号链接。

据我了解，不允许将其导入/ src目录之外，因此我想知道如何“添加符号链接”或您是否知道其他解决方法。

Answer 1

我相信您正在使用create-react-app ... ModuleScopePlugin中包含此功能，可以通过弹出应用程序并编辑Webpack配置来禁用它（如{{3}中所述}。

但是请注意，该功能存在是有原因的。 create-react-app构建工具仅处理src /目录，因此，例如，Babel不会编译此处以外的JavaScript。此外，如果使用像Webpack这样的捆绑器，通常会试图避免污染全局范围。因此，除非您有确凿的理由需要执行此操作，否则我会说尝试将其移动。

Answer 2

您可以使用rescripts library来修改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

如我所见，您想将父组件导入子组件。

在定义路径'./'时，它表示您正在使用的当前目录，因此可以通过沿'../'进行上一层升级，而在上层目录中进行同样操作。

因此，如果要从Speech.js组件内的公共文件夹中导入，可以执行以下操作。

//在Speech.js

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

希望这对您有用。

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

3 个答案: