JS 模块化

目录

1. 模块化的发展史

2. CommonJS

3. ES6 模块化

3.1 node 中使用 ESM

3.2 浏览器中使用 ESM

---

1. 模块化的发展史

后端语言很早就有了模块化，如 python 等，但 JS 很长一段时间都没有。

这种结果就是 js 无法将一个大文件，拆分成多个小文件，然后再拼接起来，这就在开发大型的、复杂的项目时非常困难。

但是虽然 JS 官方没有给出模块化，但开发者社区却诞生了几种模块化思想，或者叫规范，如 AMD、CMD、CommonJS等。

在这些规范中，AMD 和 CMD 可以在浏览器端实现模块化，CommonJS 更适合 Node 端，因为其默认无法解决浏览器端的异步加载问题，所以不适合浏览器端使用。

2015 年，在 ES6 发布之际，JS 官方终于给出了自己的模块化方案 ES6 Module(ESM)，此种模块化方案可以替代、AMD、CMD和 CommonJS，同时支持 浏览器和服务端的模块化，最终实现大一统的模块化方案。

无论是哪种模块化方案，都支持一些基本的概念

• 一个 js 文件就是一个模块
• 模块中的数据是独立的，其他模块默认无法访问

下面重点谈谈 CommonJS 和 ESM

2. CommonJS

此种模块化规范与 node.js 相伴相生，很长的一段时间内，Node 都只支持这种模块化方案。

使用 exports 或者 module.exports 暴漏数据，使用 require 加载模块

a.js 导出

let name='yhb'
module.exports.name=name
let age=20
module.exports.age=age

b.js 导入

const a_modue=require('./a')
console.log(a_modue)

a_module 是一个对象

{ name: 'yhb', age: 20 }

a.js 中也可以像下面这样导出数据

let name = 'yhb'
let age = 20
module.exports = {
    name,
    age
}

上面就是 CommonJS 模块化的最基本的内容

3. ES6 模块化

ES6 模块化简称 ESM

ESM 暴漏数据使用 export 或者 export default，加载数据使用 import

而且同时支持服务端和浏览器端

3.1 node 中使用 ESM

node 中如果想更改为使用 ESM，需要在 package.json 中添加 type 属性，并设置值为 module(type 属性的默认值为 commonjs)

type":"module"

a.js

export let name = 'yhb'
export function f1() {
    console.log('f1')
}

b.js

import {name,f1} from './a.js'
f1()

a.js 中也可以向下面这样导出

let name='yhb'
let age=20
function sayHello(){
    console.log('hello')
}
export {name,age,sayHello}

b.js

import {name,age,sayHello} from './a.js'
console.log(name)
console.log(age)
sayHello()

b.js 中加载模块时，除了像上面一样，分别指定要加载的模块中的数据外，也可以加载整个模块

import * as a_module from './a.js'
console.log(a_module.name)
console.log(a_module.age)
a_module.sayHello()

在上面的代码中，开发者需要知道 a.js 模块中的变量或者函数名称，在加载时或者使用时，名称不能写错，

如下面代码，因为 a.js 中没有 aaa 变量，所以下面的引入会报错

import {name,aaa}  from './a.js'

是否可以在某种情况下，开发者不需要知道模块中变量或者函数的名字，也可以使用呢？

模块中使用 export default 语法可以很好的解决这个问题

a.js

let name='yhb'
export default name

b.js

import sss  from './a.js'
console.log(sss)

export default 相当于导出了一个叫做 default 的变量（default  变量与 name 变量的值相同），b.js 中可以为其随意起一个名字

export default 导出的也可以是一个函数，因为模块外部可以随意为函数起一个名字，所以这里使用匿名函数，函数名称在这里没有意义

export default function (){
    console.log('sayHello')
}

b.js

import f1  from './a.js'
f1()

因为 expor default 是默认输出，所以每个模块中只能有一个 export default 语句

export default 除了像上面那样，导出一个变量或者函数外，也可以导出一个对象

let name = 'yhb'
let age = 20
export default {
    name,
    age
}

其他模块加载时，不能像没有使用 default 时的写法

import {name,age}  from './a.js'

而是必须这样写

import a_module  from './a.js'
console.log(a_module.name)
console.log(a_module.age)

3.2 浏览器中使用 ESM

a.js

let name = 'yhb'
let age = 20
export {
    name,
    age
}

b.js

import {name,age}  from './a.js'
function printInfo(){
    console.log(`${name}今年${age}岁了`)
}
printInfo()

index.html

 <script type="module" src="./b.js"></script>

如果 b.js 中没有调用 printInfo，而是导出

import {name,age}  from './a.js'
function printInfo(){
    console.log(`${name}今年${age}岁了`)
}
export {printInfo}

index.html 中如果希望调用 printInfo 的话，需要向下面这样写

<script type="module">
        import {printInfo} from './b.js'
        printInfo()
    </script>