javascript - 在 React 中，如何直接从 webpack bundle 导入组件？

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

需要用Webpack将abc文件夹编译成独立的库模块，然后导入即可。然后，您可以将它发布到 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