当前位置: 首页 > news >正文

命名导出和默认导出的用法区别

背景:

1、在编写代码的时候,build打包报警告,使用GPT询问之后得到命名导出和默认导出的区别,因此有想法去了解下命名导出和默认导出的用法区别。

export 'default' (imported as 'store') was not found in '@/content-scripts/store' (possible exports: store)

 

 结论:

1. 命名导出(Named Export)

  • 使用 import { store } 是导入一个 命名导出 的模块成员。
  • 命名导出允许从一个文件中导出多个不同的成员,每个成员都需要在导入时用花括号指定其名字。
命名导出示例:

store.js

// 导出多个命名成员
export const store = {// store 的内容
};export const anotherStore = {// anotherStore 的内容
};

导入方式:

// 使用花括号导入指定的命名导出
import { store, anotherStore } from '@/content-scripts/store';

在这种情况下,storeanotherStore明确命名的导出,并且可以同时导入多个命名导出。

2. 默认导出(Default Export)

  • 使用 import store 是导入一个 默认导出 的模块成员。
  • 默认导出文件中只能有一个导出项,不需要花括号,并且导入时可以自定义导入名称(即导入时的名字不必与导出时的名字相同)。
默认导出示例:

store.js

// 仅导出一个默认成员
const store = {// store 的内容
};export default store;

导入方式:

// 不使用花括号,并且可以重命名导入的内容
import store from '@/content-scripts/store';

在这种情况下,store默认导出,文件中只能有一个默认导出,而且导入时可以随意命名(例如你可以用 import myStore from '@/content-scripts/store' 这样的导入)。

3. 关键区别总结

  • import { store }: 用于导入 命名导出,并且必须与导出的名字完全一致,且可以同时导入多个命名成员。
  • import store: 用于导入 默认导出,只需导出一个成员,导入时可以重命名。

相关文章:

  • RabbitMQ08_保证消息可靠性
  • 2、在LVGL模拟器中了解部件的基础属性
  • 智慧城市主要运营模式分析
  • 【后端开发】JavaEE初阶——计算机是如何工作的???
  • 常见的TTL,RS232,RS485,IIC,SPI,UART之间的联系和区别
  • YOLOv8 Flask整合问题
  • 什么是Agent智能体?
  • 2024年信息安全企业CRM选型与应用研究报告
  • 探索 Android DataBinding:实现数据与视图的完美融合
  • 中间件:maxwell、canal
  • SpinalHDL之语义(Semantic)(一)
  • Python办公自动化案例:将Excel数据批量保存到Word表格中
  • spring boot启动报错:so that it conforms to the canonical names requirements
  • 验收测试:从需求到交付的全程把控!
  • 从自身经历浅谈对于C++/Java的认识
  • 网络传输文件的问题
  • (三)从jvm层面了解线程的启动和停止
  • [deviceone开发]-do_Webview的基本示例
  • Cookie 在前端中的实践
  • Git初体验
  • mysql常用命令汇总
  • passportjs 源码分析
  • python学习笔记 - ThreadLocal
  • React Native移动开发实战-3-实现页面间的数据传递
  • Shell编程
  • Terraform入门 - 3. 变更基础设施
  • Vue.js 移动端适配之 vw 解决方案
  • Web Storage相关
  • 笨办法学C 练习34:动态数组
  • 翻译:Hystrix - How To Use
  • 工作中总结前端开发流程--vue项目
  • 关于使用markdown的方法(引自CSDN教程)
  • 浏览器缓存机制分析
  • 前端之React实战:创建跨平台的项目架构
  • 深度解析利用ES6进行Promise封装总结
  • 世界编程语言排行榜2008年06月(ActionScript 挺进20强)
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • 走向全栈之MongoDB的使用
  • ​Base64转换成图片,android studio build乱码,找不到okio.ByteString接腾讯人脸识别
  • ​决定德拉瓦州地区版图的关键历史事件
  • ​什么是bug?bug的源头在哪里?
  • # 学号 2017-2018-20172309 《程序设计与数据结构》实验三报告
  • #NOIP 2014#Day.2 T3 解方程
  • #进阶:轻量级ORM框架Dapper的使用教程与原理详解
  • ${ }的特别功能
  • $NOIp2018$劝退记
  • (1/2)敏捷实践指南 Agile Practice Guide ([美] Project Management institute 著)
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (C)一些题4
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (附源码)springboot电竞专题网站 毕业设计 641314
  • (四)activit5.23.0修复跟踪高亮显示BUG
  • (五)c52学习之旅-静态数码管
  • (转)jQuery 基础
  • (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m