一篇理解前端模块化：AMD、CMD、CommonJS、ES6

一、前端模块介绍

01. 模块化简介

模块化就是把单独的一个功能封装到一个模块中。

模块之间相互隔离，可以通过指定的接口公开内部成员，也可以依赖别的模块。

02. 传统开发模式的主要问题

问题1：命名冲突

如果存在重名的变量或者方法，会相互覆盖。

问题2：文件依赖

js无法直接实现相互引用。

二、模块化的相关规范

01. 浏览器端模块化规范

1. AMD：

AMD是"Asynchronous Module Definition"的缩写，意思是"异步模块定义"。

引用的是requirejs

2. CMD

引用的是seajs， 更多参考(https://seajs.github.io/seajs/docs/)

因为这两个模块都过时了，详细知识自行google吧。

02. 服务器端模块化规范

1. CommonJS

commonjs是同步的方式加载模块，

模块成员导出使用module.exports 或者 exports。

模块成员导入使用require('data'); 

在nodejs中加载模块就是的commonJS

举例：

在m.js中导出：

let name = 'lisi';
let sayHello = () => {
   console.log('hello');
}
module.exports.man = man;
module.exports.sayHello = sayHello;
1.
2.
3.
4.
5.
6.

在index.js导入中：

let person = require('./m.js');
console,log(person)
1.
2.

03. es6模块化规范 

1.  ES6 模块化规范，是浏览器端与服务器端通用的模块化开发规范

AMD 和 CMD 只适用于浏览器端的 Javascript 模块化，CommonJS 只适用于服务器端的 Javascript 模块化。这些模块化都有一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准。

 ES6 模块化规范解决了上述问题，是浏览器端与服务器端通用的模块化开发规范。

04. ES6模块化规范中导入和导出

每个 js 文件都是一个独立的模块

语法：

导入模块成员使用：import 关键字

暴露模块成员使用 ：export 关键字
1.
2.
3.

三、通过 babel 体验 ES6 模块化

01. 环境搭建

步骤1: 下载babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
1.
2.

步骤2: 在项目根目录创建文件 babel.config.js

步骤3: babel.config.js 文件内容填写配置信息代码

const presets = [
 ["@babel/env", {
 targets: {
 edge: "17",
 firefox: "60",
 chrome: "67",
 safari: "11.1"
 }
 }]
 ];
 module.exports = { presets };
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

 步骤4: 通过 npx babel-node index.js 执行代码

02. es6模块的导入和导出

1. 默认导出与导入export default

语法：

默认导出：export default

默认导入：import 接收名称 from '模块标识符'
1.
2.
3.

举例：

新建m.js文件，写入如下代码，把变量和方法导出

let a = 10;
let b = 20;
function fn(){}
export default{
    a,
    b,
    fn
}
1.
2.
3.
4.
5.
6.
7.
8.

新建index.js，用import导入m.js中的代码

import m from './m.js'
console.log(m)
1.
2.

执行：

npx babel-node index.js
1.

结果：

注意：每个模块中，只允许使用一次 export default。

2. 按需导入和按需导出

语法：

按需导出：export let s1 = 10

按需导入：import { s1 } from '模块标识符'
1.
2.
3.

举例：

在m.js中：

export  let s1 = 10;
1.

在index.js中：

import { s1 }  from './m.js'
console.log(s1)
1.
2.

执行：

npx babel-node index.js
1.

结果：

3. 直接导入并执行模块代码

举例：

在m.js中：

for(var i = 0;i<3;i++){
    console.log(i)
}
1.
2.
3.

在index.js中

import './m.js'
1.

执行：

npx babel-node index.js
1.

结果：

所以：模块化的好处，方便了代码重用和维护，提升了开发效率。