javascript - 导入的组件在 react-create-app 中转换为 "/static"url

Question

我遇到了一个问题，我真的找不到任何以前的答案或相关文档。

我正在将本地计算机上模块中的组件“login.jsx”加载到“index.js”中:

import Login from './login';

export { Login };

“login.jsx”中导出的组件非常基础。

模块 main 直接指向 index.js 文件，我将其导入到 create-react-app 生成的“App.js”文件中。

模块的目录结构如下:

module
   | src
   | --- components
   | --- --- login.jsx
   | --- --- index.js
   | package.json    

值得注意的是，这也是一个 create-react-app，但生成的文件都不是链接模块主要导出的一部分。

当我导入它和 console.log 时，它被导入为一个字符串:“/static/media/login.1d0b2e37.jsx。”

具体来说，我得到的错误是:

Invalid tag: /static/media/login.1d0b2e37.jsx

因为我正在尝试加载导入:

import { Login } from 'component-module';

直接进入 react-router-dom 路由。直接位于我的 create-react-app 文件夹“src”中的所有组件都呈现得很好。

记录时:

console.log(Login);

导入后，马上就明白是一个字符串:"/static/media/login.1d0b2e37.jsx."

我的 create-react-app 项目的目录结构是(一个通用的 create-react-app):

create-react-app
   | src
   | --- App.js

其中存在上述导入，这导致将 Login 作为字符串导入。

外部组件的 create-react-app 开发服务器渲染是否存在一些奇怪的地方？也许在将外部对象视为静态的 Webpack 插件之一？

据我所知，create-react-app docs 中没有关于此的信息

Answer 1

模块是指库吗？就像您可以通过 npm install 安装为其他应用程序的依赖项一样？

如果是这样，则 CRA 不是为此目的而设计的。它旨在用于创建应用程序。

如果您确实认为需要为登录组件创建一个库，并希望使用 CRA 来实现，您可以遵循以下指南:https://medium.com/@lokhmakov/best-way-to-create-npm-packages-with-create-react-app-b24dd449c354或使用 this tool ，虽然我自己从未尝试过，也不能保证。

不过，将您的组件实现为一个库是否有充分的理由？ 库主要用于与开发人员共享通用功能，以便在他们的个人应用程序中使用。

如果您只打算在您的特定应用中使用此组件，我建议您将其实现为您应用中的一个组件。您仍然可以将它实现为一个独立的库，但不需要设置构建逻辑。

create-react-app
|src
|    App.js
|    components
|        Login
|            index.js
|            Login.jsx

并且在 App.js 中 import Login from './components/Login