Module - ES6模块化

目录

• 模块化概述
• 浏览器端模块化规范
  • AMD
  • CMD
• 服务器端模块化规范
  • CommonJS
• ES6模块化
  • 概述
  • Node.js 中通过 babel 使用 ES6 模块化
  • ES6 模块化的基本语法
    • 默认导出 与 默认导入
    • 按需导出 与 按需导入
    • 直接导入并执行模块代码

---

模块化概述#

• 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
• 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护
  
  

浏览器端模块化规范#

AMD#

AMD: Require.js

CMD#

CMD: Sea.js

服务器端模块化规范#

CommonJS#

• CommonJS 表示 NodeJS-模块化
• 模块分为 单文件模块 与 包
• 模块成员导出：module.exports 和 exports
• 模块成员导入：require('模块标识符')

ES6模块化#

概述#

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

• AMD 和 CMD 适用于浏览器端的 Javascript 模块化
• CommonJS 适用于服务器端的 Javascript 模块化

因此，ES6 语法规范中，在语言层面上定义了 ES6 模块化规范，是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范中定义：

• 每个 js 文件都是一个独立的模块
• 导入模块成员 使用 import 关键字
• 暴露模块成员 使用 export 关键字
  
  

Node.js 中通过 babel 使用 ES6 模块化#

• babel 概述
  Babel 中文文档 · 下一代 JavaScript 编译器
  NodeJs本省支持 common.js, 但对 ES6模块化支持的并不多 ，通常需要使用 babel 第三方插件来更好的支持 ES6模块化这种新特性。
  可把 babel 看成一种转换工具，它能够把高级的有兼容性的 js代码 转换成低级的且兼容性较好的 js代码
• babel 的基本使用
  1. 在项目根目录下执行命令npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
  2. 继续执行命令npm install --save @babel/polyfill
  3. 项目跟目录创建 babel的配置文件 babel.config.js，文件内容如下

     const presets = [
     	[
     		"@babel/env", 
     		{
     			// 适配 指定版本的浏览器
     			targets: {
     				edge: "17",
     				firefox: "60",
     				chrome: "67",
     				safari: "11.1"
     			}
     		}
     	]
     ];
     module.exports = { presets };
     

  4. 通过 npx babel-node index.js 执行指定的代码
     注意，使用了ES6模块化之后，如果通过NodeJS自身的node命令执行代码，很有可能会报错

ES6 模块化的基本语法#

默认导出 与 默认导入#

• 默认导出语法 export default 默认导出的成员

• 默认导入语法 import 接收名称 from '模块标识符'

// 导入模块成员
import m1 from './m1.js'
console.log(m1)
// 打印输出的结果为：
// { a: 10, c: 20, show: [Function: show] }
// 如果 m1.js 没有导出成员，那么向输出 {} (空对象)

// m1.js
// 定义私有成员 a 和 c
let a = 10
let c = 20
// 外界访问不到变量 d ,因为它没有被暴露出去
let d = 30
function show() {}
// 将本模块中的私有成员暴露出去，供其它模块使用
export default {
	a,
	c,
	show
}
/* 注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！
export default {
	d,
}
*/

按需导出 与 按需导入#

• 按需导出语法 export let s1 = 10

• 按需导入语法 import { s1 } from '模块标识符'

// m1.js

// 模块中 可以使用多次 export 来按需导出成员 
// 向外按需导出变量 s1
export let s1 = 'aaa'
// 向外按需导出变量 s2
export let s2 = 'ccc'
// 向外按需导出方法 say
export function say = function() {}

// 导入模块成员
// 注意，按需导入成员格式为对象，内部属性名要与导出时的 变量名保持一致
// 可通过 ‘as’ 为被导出的成员 起一个别名，后续使用要通过别名来使用该成员
import { s1, s2 as ss2, say } from './m1.js'
console.log(s1) // 打印输出 aaa
console.log(ss2) // 打印输出 ccc
console.log(say) // 打印输出 [Function: say]

• 按需的导入与导出 可以和 默认导入与导出 共存

// m1.js
let a = 10, c = 20, d= 30
function show() {console.log('1111111111111')}
// 默认导出
export default {
  a,
  c,
  show
}
// 按需导出
export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {console.log('ooooooooo')}

// m1: 默认导入的成员, {...}: 为按需导入的成员，两者可同时声明
import m1,{s1, s2 as ss2, say} from './m1';
console.log(m1) // 输出 { a: 10, c: 20, show: [Function: show] }
console.log(s1) // 输出 aaa
console.log(ss2)// 输出 ccc
console.log(say)// 输出 [Function: say]

直接导入并执行模块代码#

使用情景: 只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

// m2.js
// 在当前模块中执行一个 for 循环操作
for(let i = 0; i < 3; i++) {
	console.log(i)
}

// 直接导入并执行模块代码
import './m2.js'; // 依次输出 0 1 2