ReactJS 在 src/ 目录外导入组件

16 浏览
0 Comments

ReactJS 在 src/ 目录外导入组件

我有两个React应用程序（A-app，B-app）。我需要将A-app中的一个组件导入到B-app中。\n但是当我尝试这样做时，我看到了以下错误。\n

./src/App.js
模块未找到：您尝试导入../../src/components/Dashboard/container，它位于项目src/目录之外。不支持src/之外的相对导入。您可以将其移到src/中，或者从项目的node_modules/添加符号链接。

\n我尝试在B-app的node_modules中为此组件创建符号链接，但它没有起作用。\n我还尝试在项目根目录中创建.env文件，并将以下内容放入文件中：NODE_PATH=src/，但这个解决方法也不起作用。\n我该如何解决这个问题？\n对我的英语表示抱歉。

0

3 答案

0 Comments

问题的原因是，在ReactJS中，通常情况下，我们只能在src文件夹内导入组件。但是有时候我们希望能够在src文件夹外导入组件，这就导致了这个问题的产生。

解决方法是，在A-app的node_modules文件夹中创建一个符号链接，将它链接到src文件夹外的组件所在的路径。具体操作是，在A-app的node_modules文件夹中运行以下命令：

ln -s ../../../src/components/Dashboard ./app-b-dashboard

创建了这个符号链接之后，在A-app中就可以通过以下方式导入组件：

import Dashboard from 'app-b-dashboard/container'

需要注意的是，具体的命名可能会根据项目的特定布局而有所不同。这个解决方法是根据你提供的信息做出的最佳猜测。

如果你想要在B-app中的所有模块中创建来自A-app的符号链接，可能最好的方式是根据stackexchange规则提个新的问题。但是如果B-app中只需要A-app的模块，你可以考虑将B-app的node_modules文件夹替换为指向A-app的node_modules的符号链接。不过我不确定这是否是一个好主意。另一个选择是逐个创建符号链接。

希望这个解决方法能对你有帮助！非常感谢你的问题和答案！

0
0 Comments

ReactJS中将组件导入到src/目录以外的原因是create-react-app添加了此特殊限制。如果无法将代码移动到src目录中，有两种解决方法。一种是将组件作为模块，并像私有包一样安装它，另一种是参考这里的解决办法。

0
0 Comments

ReactJS import component outside src/ directory的问题是在尝试解决类似问题时偶然发现的。我认为解决方法可能是相关的，所以我在这里发布它。

从NPM 2.0开始，你可以在package.json中声明本地依赖项。这允许你在src/目录之外的文件夹中维护本地模块，并在npm install期间将它们复制到node_modules目录中。

将你的模块放在src/之外的任何位置，例如：

./packages/app-b-dashboard

使用file:前缀在package.json中声明一个本地依赖项：

"dependencies": {

"app-b-dashboard": "file:./packages/app-b-dashboard"

}

运行

npm install

现在你可以在你的A-app中导入它

import Dashboard from 'app-b-dashboard/container'

这个解决方法仍然有效吗？有人可以确认吗？因为当我尝试这样做时，我得到另一个错误。-> 无法从".. \ my \ component \ path \ from \ AppB"安装，因为它不包含package.json文件。

嗨，我尝试了，但是它给了我这个异常将/preset-react（https://git.io/JfeDR）添加到您的Babel配置文件的“presets”部分以启用转换。如果您想保持原样，请将/plugin-syntax-jsx（https://git.io/vb4yA）添加到“plugins”部分以启用解析。但是我在预设中确实有/preset-react，我该如何修复它？

它确实有效，并且你需要在你导入的文件夹中有一个package.json文件。

0