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

ES6模块化简明笔记

1、什么是模块化

详见看上一篇笔记CommonJs模块化简明笔记

2、为什么需要模块化

详见看上一篇笔记CommonJs模块化简明笔记

3、导入和导出的概念

详见看上一篇笔记CommonJs模块化简明笔记

4、模块导出(暴露)

4.1 导出(暴露)方式1:分别暴露

export const name = '张三'
export const age = 18
export function getAddress (){return '甘肃省兰州市城关区'
} 

4.2 导出(暴露)方式2:统一暴露

const name = '张三'
const age = 18
function getAddress (){return '甘肃省兰州市城关区'
} 
export {name,age,getAddress}

统一导出,并非对象,所以无法使用xx:xx的格式

4.3 导出(暴露)方式3:默认暴露

const name = '张三'
const age = 18
function getAddress (){return '甘肃省兰州市城关区'
} 
// export default 默认暴露
export default {name,age,getAddress}//默认暴露,引入的使用,比较简单,随意起名
import aaa from './user.js'
console.log(aaa)

5、模块导入

5.1 全部导入

可以将模块中的所有导出内容整合到⼀个对象中。
无论导出是什么方式

import * as user from './user.js' 

5.2 命名导入

分别导出统一导出的时候使用

import {name,age,getAddress} from './user.js' 

也可以在导入的时候重命名:

import {name as myName,age as myAge ,getAddress as myGetAddress} from './user.js' 

5.3 默认导入

import user from './user.js' //默认导出的名字可以修改,不是必须为user

5.4 动态导入

允许在运⾏时按需加载模块,返回值是⼀个 Promise。
在这里插入图片描述

5.5 import 可以不接收任何数据

例如:只是让 test.js 参与运⾏

import './test.js'

6、Node.js 中运⾏ ES6 模块

Node.js 中运⾏ ES6 模块代码有两种⽅式:

6.1 ⽅式⼀

将 JavaScript ⽂件后缀从 .js 改为 .mjs ,Node 则会⾃动识别 ES6 模块。
在这里插入图片描述

6.2 ⽅式⼆

在目录下新建package.json,如果有,就不需要新建了
在这里插入图片描述

package.json中添加配置,type 属性值为 module
在这里插入图片描述

相关文章:

  • clone plugin搭建MySQL 8.0 主从复制
  • [linux][命令]linux文件操作命令大全
  • 11. Rancher2.X部署多案例镜像
  • Eclipse 运行配置
  • 【连续4届EI检索,SPIE 出版】第五届信号处理与计算机科学国际学术会议(SPCS 2024,8月23-25)
  • 【nginx 第二篇章】各个环境安装 nginx
  • 将 Tcpdump 输出内容重定向到 Wireshark
  • 数据结构——栈的讲解(超详细)
  • vLLM CPU和GPU模式署和推理 Qwen2 等大语言模型详细教程
  • 求职 day13总结
  • 将电脑打造成私人网盘,支持外网访问之详细操作教程
  • Vue3学习笔记第一天
  • 数据预处理和探索性数据分析(上)
  • 网络分段如何增强 OT 网络的可见性
  • 数据库原理面试-核心概念-问题理解
  • 2018一半小结一波
  • Angular Elements 及其运作原理
  • conda常用的命令
  • Java编程基础24——递归练习
  • java取消线程实例
  • java中具有继承关系的类及其对象初始化顺序
  • macOS 中 shell 创建文件夹及文件并 VS Code 打开
  • Sublime text 3 3103 注册码
  • Vue 2.3、2.4 知识点小结
  • 基于阿里云移动推送的移动应用推送模式最佳实践
  • 面试题:给你个id,去拿到name,多叉树遍历
  • 让你的分享飞起来——极光推出社会化分享组件
  • 如何在 Tornado 中实现 Middleware
  • 少走弯路,给Java 1~5 年程序员的建议
  • 协程
  • 用简单代码看卷积组块发展
  • 再次简单明了总结flex布局,一看就懂...
  • 在Mac OS X上安装 Ruby运行环境
  • 正则表达式
  • 【运维趟坑回忆录】vpc迁移 - 吃螃蟹之路
  • scrapy中间件源码分析及常用中间件大全
  • ​必胜客礼品卡回收多少钱,回收平台哪家好
  • ‌前端列表展示1000条大量数据时,后端通常需要进行一定的处理。‌
  • (21)起落架/可伸缩相机支架
  • (6)STL算法之转换
  • (阿里巴巴 dubbo,有数据库,可执行 )dubbo zookeeper spring demo
  • (二)【Jmeter】专栏实战项目靶场drupal部署
  • (二)换源+apt-get基础配置+搜狗拼音
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (算法二)滑动窗口
  • (太强大了) - Linux 性能监控、测试、优化工具
  • (五)IO流之ByteArrayInput/OutputStream
  • (转)使用VMware vSphere标准交换机设置网络连接
  • .net core docker部署教程和细节问题
  • .NET Core 将实体类转换为 SQL(ORM 映射)
  • .NET Micro Framework 4.2 beta 源码探析
  • .net 调用海康SDK以及常见的坑解释
  • .NET 使用 ILMerge 合并多个程序集,避免引入额外的依赖
  • .NetCore发布到IIS
  • .NET开源全面方便的第三方登录组件集合 - MrHuo.OAuth