ES6模块化

它是浏览器端与服务器端通用的模块化开发规范，它的出现降低了前端开发模块化的学习成本

回顾nodeJS的模块化规范

1. 浏览器端遵循AMD和CMD规范
2. 服务器端遵循CommonJS规范 （1）导入其他模块用require() （2）模块对外共享成员使用module.exports对象 优点：降低了沟通成本，极大方便了各模块之间的相互调用

ES6模块化规范中定义

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

体验ES6模块化

1. node 高于14.15.1
2. 在package.json的根节点中添加"type":"module"节点

默认导入与默认导出

默认导出

语法规范：export default 默认导出的成员

let a = 5
function show() {
    console.log('默认导出')
}
export default {
    a,
    show
}

注：

• 每个模块中，只允许使用唯一的一次export default，否则会报错

语法规范：import 接收名称 from '模块标识符'

import m1 from '../../ts/hook'
onMounted(()=> {
    console.log(m1)
})
// {a: 5, show: ƒ}

注：

• 默认导入时的接收名称可以任意名称，只要合法就行

按需导出与按需导入

按需导出

语法规范：export 按需导出的成员

export const a = () => {
    console.log(6666)
}

export function say() {
    console.log('说话')
}

注：

• 每个模块中可以使用多个按需导出

按需导入

语法规范：import { a，say } from '模块标识符'

import { a , say} from '../../ts/a'
onMounted(()=> {
    console.log(a(),say())
})

注：

• 按需导入的成员名称必须和按需导出的成员名称保持一致
• 按需倒日时，可以用as关键字进行重命名
• 按需可以和默认导入一起使用

export const a = '123'
const b = 66
export default  {
   b
}

import info, { a } from './****'