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

Question

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

第 1 步： 创建一个 ABC 文件夹，命名为 abc.bundle.js

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

第 2 步： 在 DEF 文件夹中，写入文件 DEF.js 如下

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

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

第 3 步： 在 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.

Answer 1

https://webpack.js.org/configuration/target/

Webpack 提供了不同的打包目标。取决于你如何配置 webpack 的配置，你可以在不同的环境中使用 bundle 文件。

我相信你的包的目标是web，因为它是默认的。要使其在 Node 环境中可用，您需要将 target 设置为 node

Answer 2

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

Webpack library 和 libraryTarget 选项值得一看：

https://webpack.js.org/configuration/output/#output-library https://webpack.js.org/configuration/output/#output-librarytarget

或者，有一些工具可以帮助您解决此类问题：

https://github.com/insin/nwb

例如

https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb