Javascript 在React中，如何直接从webpack包导入组件？

在正常情况下，我们从另一个JavaScript文件导入组件。然而，在我的项目中，我想从webpack创建的包中导入组件

第1步： 创建一个名为ABC.bundle.js的ABC文件夹包

注意：ABC文件夹包含文件a.js、b.js、c.js，并分别包含组件a、b、c

第二步： 在DEF文件夹中，按如下方式编写文件DEF.js

注意：从a.js导入“a”组件可以正常工作

import react from 'react'
import a from './abc/a.js'

第三步： 在DEF文件夹中，按如下方式编写文件DEF.js

注意：从abc.bundle.js导入“a”组件时，会出现错误

import react from 'react'
import a from 'abc.bundle.js'

根据我和我的团队的说法，我们可以从捆绑包中导入组件。因为

 1) The bundle is a js file, and we can import one code from one js file to another
 2) Node modules packages are also get created by webpack, and we can import functionalities from that package.

---

您需要将

abc

文件夹编译为带有Webpack的独立库模块，然后才能导入它。然后，您可以将其发布到npm，并像任何其他第三方模块一样使用它，或者只将其发布到父项目中的文件夹中（可能使用monorepo结构）

网页包

库

和

库目标

选项值得一看：

或者，有一些工具可以帮助您完成这类工作：

例如

Webpack提供了不同的捆绑目标。根据您如何配置Web包的配置，您可以在不同的环境中使用捆绑包文件

---

我相信您的bundle的目标是

web

，因为它是默认的。要使其在节点环境中可用，您需要将target设置为

Node

我已将输出库目标设置为'var'，现在想使用scriptjs导入它，您能告诉我如何导入此组件吗？我可以导入和打印它，并打印对象，但无法使用它。此处相同…将目标设置为'var'，在客户端应用程序中导入bundles js脚本，可以打印出对象，甚至可以从bundle调用函数，但无法从中呈现React组件。有人知道吗？你找到从webpack捆绑包加载组件的方法了吗。？