Question

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

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

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

步骤2： 在DEF文件夹中，如下编写文件DEF.js

注意：从a.js导入“ a”组件很好

im1_full = imread(img);

hmap1a=0*im1_full(:,:,1);
hmap1b=double(0*im1_full(:,:,1));
hmap1c=double(0*im1_full(:,:,1));

%put the max size outside the loop
imax = size(im1_full,1)-460-1;
jmax = size(im1_full,2)-700-1;

for i11=1:10:imax
    for j11=1:10:jmax
        tmp1=im1_full(i11+460-1,j11+700-1,:); %no need i11:i11, because its already an integer
        [labelIdx, scores]= predict(categoryClassifier, tmp1);
        hmap1a(i11,j11)= labelIdx;
        hmap1b(i11,j11)=scores(1);
        hmap1c(i11,j11)=scores(2);

    end
end
toc;

第3步： 在DEF文件夹中，如下编写文件DEF.js

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

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

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

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

Answer 1

您需要将abc文件夹编译为Webpack的独立库模块，然后才能将其导入。然后，您可以将其发布到npm，并像其他任何第三方模块一样使用它，也可以将其发布到父项目中的文件夹中（也许使用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

Answer 2

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

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

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

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

2 个答案: