javascript - 在 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.

标签： javascriptreactjswebpack

Answer 1

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

Webpacklibrary和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