ES6模块化

发表于 更新于 分类于
es6 模块化语法

ES6模块化

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

CommonJS规范:

  • 导入：require();
  • 导出：module.exports 对象

2. 前端模块化规范分类

ES6模块化规范诞生前：

  • AMD和CMD适用于浏览器端；
  • CommonJS适用于服务器端；

ES6模块化规范，统一浏览器端和服务器端JavaScript模块化规范；

3. ES6模块化规范定义

  • 每个js文件都是一个独立的模块
  • 导入：import
  • 导出：export

4. 在node.js中体验ES6模块化

node.js 默认仅支持 CommonJS模块化规范，学习ES6模块化语法，需：

  • 确保安装了v14.15.1+版本的node.js
  • 在 package.json 的根节点添加 “type”:”module”

5. ES6模块化的基本语法

  • 默认导出和默认导入
  • 按需导出与按需导入
  • 直接导入并执行模块中的代码

5.1默认导出、导入

  • 导出
1
2
3
4
5
6
7
8
// export_study.js
let n=10;
function show(){}

export default{
    n,
    show
}
  • 导入
1
2
3
// import_study.js
import obj from "./export_test.js"
console.log(obj);// { n: 10, show: [Function: show] }
  • 注意事项
    • 每个模块中，只允许使用一次 export default,否则报错；

5.2 按需导出、导入

  • 导出
1
2
3
4
5
6
// export_study.js
export let rm="zhongrumeng";

export let sj="songjie"

export function say(){}

  • 导入

    语法： import {s1} from ‘模块标识符’

1
2
3
4
5
import { rm, sj, say} from "./export_test.js"

console.log(rm);//zhongrumeng
console.log(sj);//songjie
console.log(say);//[Function: say]

  • 注意事项

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

    • 按需导入的成员名称必须和按需导出的名称保持一致;

    • 按需导入可以使用 as关键字重命名；

    • 按需导入可以和默认导入一起使用(逗号隔开)；

    1
    2
    3
    4
    5
    6
    import obj2, { rm as dream, sj, say} from "./export_test.js"

    console.log(dream);//zhongrumeng
    console.log(sj);//songjie
    console.log(say);//[Function: say]
    console.log(obj2);// { n: 10, show: [Function: show] }

5.3 直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码。

1
2
3
4
// 03.直接运行模块中的代码.js
for(let i=0;i<3;i++){
    console.log(i);
}
1
2
3
4
5
// test.js
import "./03.直接运行模块中的代码.js"  // 直接导入并执行模块代码，不需要得到模块向外共享的成员
//0
//1
//2