回顾：node.js 中如何实现模块化

  • node.js 遵循了 CommonJS 的模块化规范，其中：
    • 导入其它模块使用 require() 方法
    • 模块对外共享成员使用 module.exports 对象
  • 模块化的好处：
    • 降低沟通成本、方便模块之间的相互调用

前端模块化规范分类

  • ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范
  • 社区模块化标准存在一定差异性和局限性、并不是浏览器与服务器通用的模块化标准，例如：
    • AMD 和 CMD 适用于浏览器端的 Javascript 模块化
    • CommonJS 适用于服务器端的 JavaScript 模块化

什么是 ES6 模块化规范

  • ES6 模块化规范是浏览器端与服务器端统用的模块化开发规范
  • ES6 模块化的出现极大的降低了前端开发者的模块化学习成本，开发者不需要额外学习 AMD、CMD 或 CommonJS 等模块化规范
  • ES6 模块化规范中定义：
    • 每个 js 文件都是一个独立的模块
    • 导入其他模块成员使用 import 关键字
    • 向外共享模块成员使用 export 关键字

node.js 中体验 ES6 模块化

  • node.js 中默认支持 CommonJS 模块化规范，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照如下步骤进行配置：
    • 确保安装了 v14.15.1 或更高版本的 node.js
    • 使用 npm init -y 命令，初始化并创建一个 package.json 文件，并在 package.json 的根节点中添加 “type”: “module” 节点

ES6 模块化的基本语法

  • ES6 的模块化主要包含如下 3 种用法：
    • 默认导出与默认导入
      • 默认导出语法：export default 默认导出的成员 ```javascript let n1 = 10; // 定义模块私有成员 n1 let n2 = 20; // 定义模块私有成员 n2（外界访问不到 n2，因为它没有被共享进去） function show() {} // 定义模块私有方法 show

export default { // 使用 export default 默认导出语法，向外共享 n1 和 show 两个成员 n1, show }

  2.       - 默认导入语法：import 变量 from '模块文件路径'
  3. ```javascript
  4. import variate from './exportDefault.js'
  5. console.log(variate.n1)  // 10
  6. variate.show()  // show
  • 按需导出与按需导入
    • 按需导出语法：export 导出成员 ```javascript export let s1 = ‘aaa’

export let s2 = ‘ccc’

export function say() { console.log(‘say’); }

  2.       - 按需导入语法：import {导入成员名称} from '模块文件路径'
  3. ```javascript
  4. import { s1, s2, say } from "./exportOnDemand.js";
  6. console.log(s1); // 'aaa'
  7. console.log(s2); // 'ccc'
  8. say() // 'say'
  1.   - 注意：
  2.      - 每个模块中可以使用的多次按需导出
  3.      - 按需导入的成员名称必须和按需导出的名称保持一致
  4.      - 按需导入时，可以使用 as 关键字进行重命名
  5.      - 按需导入可以和默认导入一起使用
  • 直接导入并执行模块中的代码
    • 如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员，可以直接导入并执行模块代码，示例如下： ```javascript // for.js for (let i = 0; i < 3; i++) { console.log(i) }

// importFor.js import ‘./for.js’ ```