【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 '文件路径';

相关推荐
Laurence24 分钟前
从零到一构建 C++ 项目(IDE / 命令行双轨实现)
前端·c++·ide
雯0609~33 分钟前
hiprint-官网vue完整版本+实现客户端配置+可实现直接打印(在html版本增加了条形码、二维码拖拽等)
前端·javascript·vue.js
GISer_Jing36 分钟前
构建高性能Markdown引擎开发计划
前端·aigc·ai编程
CHU7290351 小时前
生鲜商城小程序前端功能版块:适配生鲜采购核心需求
前端·小程序
huangyiyi666661 小时前
Vue + TS 项目文件结构
前端·javascript·vue.js
0思必得01 小时前
[Web自动化] Selenium处理Cookie
前端·爬虫·python·selenium·自动化
徐同保2 小时前
react-markdown使用
前端·react.js·前端框架
2601_949857432 小时前
Flutter for OpenHarmony Web开发助手App实战:CSS参考
前端·css·flutter
无法长大2 小时前
如何判断项目需不需要用、能不能用Tailwind CSS
前端·css·vue.js·elementui·vue3·tailwind css
橙露2 小时前
移动端前端适配:Rem、VW/VH 与媒体查询的综合应用指南
前端·媒体