无法在 react 中没有大括号的情况下导入模块，即使在“导出默认值”之后也是如此

Question

我在某处读到，在 react 中导入模块时，会用大括号导入整个库，并有效地增加捆绑包的大小。我使用了这个概念，并成功地导入了没有大括号的模块，就像这样：它工作正常。我不知道为什么下次我构建代码时，它开始向我显示以下警告：import Jumbotron from 'reactstrap';WARNING in ./React Coursera/Header.js 5:71-77 export default (imported as Jumbotron) was not found in reactstrap.此外，该应用程序未在浏览器中运行。然后我去了node_modules检查导出默认值是否存在于巨型中，我发现了这个语句：export default Jumbotron;这意味着它确实将Jumbotron导出为默认值，那么为什么它向我显示此警告。你能帮我解决这个问题吗？提前致谢！

Answer 1

您在哪里读到使用卷曲导入会增加捆绑包大小，这是相反的，

// below line will import everything

import * as reactstrap  from 'reactstrap'

但

// this will import only specific module

import { Jumbotron }  from 'reactstrap'

通过这条线：

// will import from /reactstrap/index.js

import Jumbotron from 'reactstrap';

您没有导入任何内容 https://github.com/reactstrap/reactstrap/blob/master/src/index.js，因为存在导出默认值

所以我不知道它以前在你的案例中是如何工作的

下行：

// and this line is not inside the /reactstrap/index.js but /reactstrap/Jumbotron.js

export default Jumbotron;

是在这里 ： https://github.com/reactstrap/reactstrap/blob/master/src/Jumbotron.js

所以你可以做：

import { Jumbotron }  from 'reactstrap'

Answer 2

这取决于您的构建设置和/或库代码的设置方式。某些库的构建方式在使用大括号时不会导入整个库。您还可以在构建工具中启用一些称为“树抖动”的功能，这将删除所有未使用的代码。

我猜你想做的是单独导入Jumbotron，当你不确定是否会导入整个库时，这是一个安全的赌注。同样，这取决于库的文件结构，但您可能在导入中缺少子目录。每个组件的node_module文件夹内都应该有目录。可能是类似的东西。您看到的默认导出可能位于该文件上。当您使用时，您要求它为库的“主”文件找到默认导出。这将在库的文件中定义。node_modules/reactstrap/JumbotronJumbotronimport Jumbotron from 'reactstrap'package.json

您需要做的是将子目录添加到导入中，如下所示（只是在这里猜测）。只要想想作为库的根目录，你可以像往常一样选择任何文件。import Jumbotron from 'reactstrap/Jumbotron'reactstrap/

如果您使用的是webpack，那么有一个很棒的插件，您可以在其中检查捆绑包中包含的内容，以确保您确实只导入所需的代码 https://github.com/webpack-contrib/webpack-bundle-analyzer