【ES6】模块化

nodejs遵循了CommonJs的模块化规范

导入 require()

导出 module.exports

模块化的好处:

  • 模块化可以避免命名冲突的问题
  • 大家都遵循同样的模块化写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用
  • 需要啥模块,调用就行

在es6模块化诞生之前, JavaScript社区就有了AMD、CMD、CommonJS(民间)

AMD、CMD适用于浏览器端的JavaScript模块化

CommonJS适用于服务器端的JavaScript模块化

太多的模块化规范给开发者增加了学习难度与开发的成本,因此官方的es6模块化规范诞生了。

为什么要学习es6模块化规范

官方提供

es6模块化浏览器端服务器都可以适用

es6模块化

导入 import

导出 export

使用步骤
  1. 确保安装了v13.0.0或更高版本的node.js
  2. 在package.json的根节点中添加"type": "module"节点
默认导入导出

默认导入 import 变量 from '文件路径'

默认导出 export default 内容

一个文件只能有一个默认导出

按需导入导出

按需导入 import {age} from '文件路径';

还可起别名 import {age as age1} from '文件路径';

按需导出 export let age = 18;

直接导入无导出

import '文件路径';

相关推荐
蜕变菜鸟几秒前
折叠页面 css
前端
菩提小狗10 分钟前
小迪安全2022-2023|第35天:WEB攻防-通用漏洞&XSS跨站&反射&存储&DOM&盲打&劫持|web安全|渗透测试|
前端·安全·xss
这个昵称也不能用吗?18 分钟前
React 19 【use】hook使用简介
前端·react.js·前端框架
web小白成长日记20 分钟前
修复 Storybook MDX 中 “does not provide an export named ‘ArgsTable‘” 的实战
前端
Aotman_28 分钟前
Vue <template v-for> key should be placed on the <template> tag.
前端·javascript·vue.js
A_nanda1 小时前
vue快速学习框架
前端·javascript·vue.js·学习·c#
蜗牛攻城狮1 小时前
“直接 URL 下载” vs “前端 Blob 下载”:原理、区别与最佳实践
前端·javascript·二进制流
海绵宝宝_1 小时前
Chrome强开Gemini助手教程
前端·人工智能·chrome
abments1 小时前
chrome设置启动浏览器后自动打开关闭前的页面
前端·chrome
刘一说1 小时前
Pinia状态持久化的“隐形陷阱“:为什么页面刷新后状态丢失?
前端·javascript·vue.js