Node.js中运行ES6模块代码有两种方式：

●方式一：将JavaScript文件后缀从.js 改为.mjs，Node 则会自动识别 ES6 模块。

●方式二：在package.json中设置type属性值为module

.3导出数据

ES6 模块化提供 3 种导出方式：①分别导出、②统一导出、③默认导出

1.「分别导出」

备注：在上方【初步体验中】环节，我们使用的导出方式就是【分别导出】

// 导出name

export let name = {str:'尚硅谷'}

// 导出slogan

export const slogan = '让天下没有难学的技术！'

// 导出getTel

export function getTel (){

return '010-56253825'

}

 2.「统一导出」

const name = {str:'尚硅谷'}

const slogan = '让天下没有难学的技术！'

function getTel (){

return '010-56253825'

}

function getCities(){

return ['北京','上海','深圳','成都','武汉','西安']

}

// 统一导出了：name,slogan,getTel

export {name,slogan,getTel}

3.「默认导出」

const name = '张三'

const motto = '走自己的路，让别人五路可走！'

function getTel (){

return '13877889900'

}

function getHobby(){

return ['抽烟','喝酒','烫头']

}

//默认导出：name,motto,getTel

export default {name,motto,getTel}

备注 :「上述多种导出方式，可以同时使用」

// 导出name ———— 分别导出

export const name = {str:'尚硅谷'}

const slogan = '让天下没有难学的技术！'

function getTel (){

return '010-56253825'

}

function getCities(){

return ['北京','上海','深圳','成都','武汉','西安']

}

// 导出slogan ———— 统一导出

export {slogan}

// 导出getTel ———— 默认导出

export default getTel

5.4导入数据

对于 ES6 模块化来说，使用何种导入方式，要根据导出方式决定。

1.「导入全部」(通用)

可以将模块中的所有导出内容整合到一个对象中

import * as school from './school.js'

2.「命名导入」(对应导出方式：分别导出、统一导出)

导出数据的模块

//分别导出

export const name = {str:'尚硅谷'}

//分别导出

export const slogan = '让天下没有难学的技术！'

function getTel (){

return '010-56253825'

}

function getCities(){

return ['北京','上海','深圳','成都','武汉','西安']

}

//统一导出

export { getTel }

命名导入：

import { name,slogan,getTel } from './school.js'

通过as重命名:

import { name as myName,slogan,getTel } from './school.js'

3.「默认导入」(对应导出方式：默认导出)

导出数据的模块

const name = '张三'

const motto = '走自己的路，让别人五路可走！'

function getTel (){

return '13877889900'

}

function getHobby(){

return ['抽烟','喝酒','烫头']

}

//使用默认导出的方式，导出一个对象，对象中包含着数据

export default { name,motto,getTel }

默认导入：

import student from './student.js' //默认导出的名字可以修改，不是必须为student

4.「命名导入 与 默认导入可以混合使用」

导出数据的模块

//分别导出

export const name = {str:'尚硅谷'}

//分别导出

export const slogan = '让天下没有难学的技术！'

function getTel (){

return '010-56253825'

}

function getCities(){

return ['北京','上海','深圳','成都','武汉','西安']

}

//统一导出

export default getTel

「命名导入」与「默认导入」混合使用，且默认导入的内容必须放在前方：

import getTel,{name,slogan} from './school.js'

5.「动态导入」(通用)

允许在运行时按需加载模块，返回值是一个 Promise。

const school = await import('./school.js');

console.log(school)

6. import 可以不接收任何数据

例如只是让 mock.js 参与运行

import './mock.js'

此时，我们感受到模块化确实解决了：①全局污染问题、②依赖混乱问题、③数据安全问题。

5.5数据引用问题

思考1： 如下代码的输出结果是什么？（不要想太多，不涉及模块化相关知识）

function count (){

let sum = 1

function increment(){

sum += 1

}

return {sum,increment}

}

const {sum,increment} = count()

console.log(sum)

increment()

increment()

console.log(sum)

 思考2：使用 CommonJS 规范，编写如下代码，输出结果是什么

let sum = 1

function increment (){

sum += 1

}

module.exports = {sum,increment}

const {sum,increment} = require('./count.js')

console.log(sum)

increment()

increment()

console.log(sum)

思考3：使用 ES6 模块化规范，编写如下代码，输出结果是什么？

let sum = 1

function increment(){

sum += 1

}

export {sum,increment}

import {sum,increment} from './count.js'

console.log(sum) //1

increment()

increment()

console.log(sum) //3

使用原则：导出的常量，务必用const定义

 6AMD 模块化规范（了解）

6.1环境准备、

第一步：准备文件结构：

文件说明：

1js 文件夹中存放业务逻辑代码，main.js用于汇总各模块。

2libs 中存放的是第三方库，例如必须要用的require.js。 

require.js

https://www.yuque.com/preview/yuque/0/2024/js/35780599/1721441912143-417162f8-5c6d-4d5d-84dd-655fdf5a5dbd.js?from=https%3A%2F%2Fwww.yuque.com%2Ftianyu-coder%2Fopenshare%2Fhycdb5tispao428h

第二步：在index.html中配置main.js与require.js

<script data-main="./js/main.js" src="./libs/require.js"></script>code>

 第三步：在main.js中编写模块配置对象，注册所有模块。

/*AMD_require.js模块化的入口文件，要编写配置对象，并且有固定的写法*/

requirejs.config({

//基本路径

baseUrl: "./js",

//模块标识名与模块路径映射

paths: {

school: "school",

student: "student",

welcome: "welcome",

}

})

6.2导出数据