javascript - 即使在“导出默认值”之后,也无法在没有大括号的情况下导入模块
问题描述
我在某处读到,导入模块与导入整个库周围的花括号做出反应,并有效地增加了包大小。我正在使用这个概念,并且成功地导入了没有花括号的模块,就像这样:
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检查jumbotron中是否存在export default,我发现了这个语句:
export default Jumbotron;
这意味着它确实将 Jumbotron 作为默认值导出,那么为什么它向我显示了这个警告。
你能帮我解决这个问题吗?
提前致谢!
解决方案
这取决于您的构建设置和/或库代码的设置方式。某些库的构建方式在您使用花括号时不会导入整个库。您还可以在构建工具中启用一些名为“tree shaking”的功能,它将删除所有未使用的代码。
我猜你想要做的是单独导入 Jumbotron,当你不确定是否会导入整个库时,这是一个安全的选择。同样,它取决于库的文件结构,但您可能缺少导入中的子目录。每个组件的 node_module 文件夹内都应该有目录。可能是类似的东西node_modules/reactstrap/Jumbotron
。您看到的默认导出可能在Jumbotron
文件中。当您使用时,import Jumbotron from 'reactstrap'
您要求它为库的“主”文件找到默认导出。这将在package.json
库文件中定义。
您需要做的是像这样将子目录添加到您的导入中(只是在这里猜测)import Jumbotron from 'reactstrap/Jumbotron'
。想想reactstrap/
作为库的根目录,你可以像往常一样选择任何文件。
如果您使用的是 webpack,那么有一个很棒的插件,您可以在其中查看捆绑包中包含的内容,以确保您确实只导入了您需要的代码https://github.com/webpack-contrib/webpack-捆绑分析器
推荐阅读
- python - bluebooth 的 Python 属性错误
- .net - 使用路径前缀在生产环境中运行 asp.net core 应用程序
- webpack - 将 webpack 输入文件路径合并到输出文件路径中
- javascript - querySelector() 返回静态节点列表或活动节点列表
- python-sphinx - 带有自动模块的 Sphinx 目录树
- python - 数据框对象在 pyspark 中不可调用
- typescript - 在angular6中使用carosel显示值列表
- python - 加快 pandas 中的数据帧操作
- php - 无法通过邮递员 put 请求提交表单数据
- java - 用@JsonIgnore 覆盖子类中的@JsonProperty