文章目录
一、ES6模块化（ES module）
1.模块化的分类
在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了
AMD
、
CMD
、
CommonJS
等模块化规范。
但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准。
例如：
- AMD 和 CMD 适用于浏览器端的 Javascript 模块化
- CommonJS 适用于服务器端的 Javascript 模块化
- 导出：
module.exports = 导出的内容
- 导入：
require('模块')
太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，官方的ES6 模块化规范诞生了！
2.为什么要学习ES6 模块化规范
ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习
AMD
、
CMD
或
CommonJS
等模块化规范。
ES6 模块化规范中定义：
- 每个 js 文件都是一个独立的模块
- 导入其它模块成员使用
import
关键字- 向外共享模块成员使用
export
关键字
3.在nodejs中使用ES6模块化
node.js 中默认仅支持 CommonJS 模块化规范，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照如下两个步骤进行配置：
- 确保安装了
v13.0.0 或更高版本的 node.js
- 在
package.json
的根节点中添加
"type": "module"
节点
type
，默认是commonjs，表示项目代码 只能 使用 CommonJS 语法（只能使用 module.exports 导出，使用require导入）
type
配置为 “module” 之后，表示项目代码 只能 使用 ES6模块化语法
二、ES6模块语法
1.ES6模块语法3 种用法：
- 默认导出与默认导入
- 按需导出与按需导入
- 直接导入并执行模块中的代码
1.1默认导出与默认导入
默认导出的语法：
export default 默认导出的成员
默认导入的语法：
import 接收名称 from '模块路径'
- 导出
const a = 10
const b = 20
const fn = () => {
console.log('这是一个函数')
}
// 默认导出
// export default a // 导出一个值
export default {
a,
b,
fn
}
- 导入
// 默认导入时的接收名称可以任意名称，只要是合法的成员名称即可
import result from './xxx.js'
console.log(result)
注意点:
- 每个模块中，只允许使用
唯一的一次 export default
- 默认导入时的接收名称可以
任意名称
，只要是合法的成员名称即可
1.2按需导入与按需导出
按需导出的语法：
export const s1 = 10
按需导入的语法：
import { 按需导入的名称 } from '模块标识符'
按需导出的语法：
export const a = 10
export const b = 20
export const fn = () => {
console.log('内容')
}
按需导入的语法：
import { a, b as c, fn } from './xxx.js'
注意事项：
- 每个模块中可以有多次按需导出
- 按需导入的成员名称必须和按需导出的名称保持一致
- 按需导入时，可以使用
as
关键字进行
重命名
按需导入可以和默认导入一起使用
将所有内容全部导入：
import * as obj from './03-按需导出.js'
console.log(obj)
/**
* {
* uname: 'zhangsan',
* age: 20,
* fn: function ......,
* default: 'hello world' // 叫做default这个，是默认导出的内容
* }
*/
1.3直接导入模块(无导出)：
如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。
可以直接导入并执行模块代码，示例代码如下：
import '模块的路径'
//xxx.js
for (let i = 0; i < 10; i++) {
console.log(i)
}
// 导入该模块
import './xxx.js'
导入内置模块和第三方模块：
// 内置模块，支持默认导入
import fs from 'fs'
// 内置模块，支持按需导入
import { readFile, writeFile } from 'fs'
// 第三方模块，肯定支持默认导入（按需导入不一定支持，因为我们并不知道别人的模块是怎么写的）
import dayjs from 'dayjs'