[JavaScript知识库]ES6 模块化

ES6 模块化 简介

ES6 模块化规范是 浏览器端 与 服务器端?通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需要再额外学习 AMD(AMD yes !!!? XD)、CMD 或 CommonJS等模块化规范。

ES6 模块化规范中定义：

• 每个js文件都是一个独立的模块
• 导入其他模块成员使用 import 关键字
• 向外共享模块成员使用 export 关键字

在node.js中体验 ES6 模块化

1. 确保安装了 v14.15.1 或更高版本的node.js
2. 在 package.json 的根节点中添加 "type": "module" 节点

?默认导出?和 默认导入

每个js脚本里面只能使用唯一一次?export default?，否则会报错

// 默认导出
// 每个js脚本里面只能使用唯一一次?export default?，否则会报错
let m1 = 10
let m2 = 20
let f1 = () =>{}

export default {
    m1,
    f1
}

// 默认导入
// 路径务必将文件后缀写上
import i1 from './01.默认导出.js'

console.log(i1)

?

?

按需导出 和 按需导入?

?

// 按需导出
export let s1 = 'aaa'
export let s2 = 'ccc'

export const add = x => x+10

// 按需导入
// 传过来发现和当前 js脚本的变量名有冲突，我们可以用 as 更改 名字，只在当前js脚本内有效

import {s1 as ss,s2,add} from './03.按需导出.js'

let s1 = 10

console.log(ss)
console.log(s2)
console.log(s1)
console.log(add(s1))

?

直接导入?

直接导入会执行被导入js脚本的程序

?

?

?