javascript 如何从反应应用程序中的公共文件夹导入文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52486116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to import file from public folder in react application?
提问by Joe
I have a javascript file in the public folder and I want to import that file to components in the folder src/components.
我在 public 文件夹中有一个 javascript 文件，我想将该文件导入文件夹 src/components 中的组件。
projectFolder
publicFolder
index.html
recorder.js
srcFolder
componentsFolder
Speech.js
Speech.css
But I can't do something like this in my component:
但是我不能在我的组件中做这样的事情：
import Recorder from '../../public/recorder'
Because I get the following error:
因为我收到以下错误：
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/ 目录之外的 ../../public/recorder。不支持 src/ 之外的相对导入。您可以将其移动到 src/ 中，也可以从项目的 node_modules/ 中向其添加符号链接。
As I've understood it's not allowed to import outside of /src directory, so I was wondering how I could "add a symlink" or if you know other ways to fix it.
据我所知，不允许在 /src 目录之外导入，所以我想知道如何“添加符号链接”或者您是否知道其他修复方法。
采纳答案by djfdev
I believe you are using create-react-app ... this is a feature included in the ModuleScopePlugin, and you can disable it by ejecting the app and editing your webpack configuration (as described in this answer).
我相信你正在使用创建反应的应用程序内......这是包括在一个功能ModuleScopePlugin，您可以通过弹出应用程序和编辑您的WebPack配置（如描述禁用它在这个答案）。
But beware, the feature exists for a reason. The create-react-app build tool only processes the src/ directory, so for example your JavaScript outside of here will not be transpiled by Babel. Furthermore, you're typically trying to avoid polluting the global scope if you're using a bundler like Webpack. So unless you've got a really specific reason why you'd need to do this, I'd say try and move it.
但请注意，该功能的存在是有原因的。create-react-app 构建工具只处理 src/ 目录，所以例如你在这里之外的 JavaScript 不会被 Babel 转译。此外，如果您使用像 Webpack 这样的打包器，您通常会试图避免污染全局范围。所以除非你有一个非常具体的理由为什么你需要这样做，否则我会说尝试移动它。
回答by Lukas
You can modify the react-scriptsconfig with the rescripts library
您可以react-scripts使用rescripts 库修改配置
Create a file called .rescriptsrc.jsin your root folder:
.rescriptsrc.js在根文件夹中创建一个名为的文件：
module.exports = config => {
const scopePluginIndex = config.resolve.plugins.findIndex(
({ constructor }) => constructor && constructor.name === "ModuleScopePlugin"
);
config.resolve.plugins.splice(scopePluginIndex, 1);
return config;
};
回答by Alok Rai
As i can see you want to import parent component in child component.
正如我所看到的，您想在子组件中导入父组件。
While defining path './' represents the current directory in which you are working so you can go one level up by following '../' for one level up and the same goes for the upper level directory.
定义路径 './' 表示您正在工作的当前目录，因此您可以通过跟随 '../' 上一级，上一级目录也是如此。
So if you want to import from public folder inside Speech.js component you could do something like this.
因此，如果您想从 Speech.js 组件内的公共文件夹导入，您可以执行以下操作。
// In Speech.js
// 在 Speech.js 中
import Recorder from './../../public/recorder';
Hope this will be useful to you.
希望这对你有用。
