一篇理解前端模块化：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;

 

在index.js导入中：

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

 

03. es6模块化规范 

 

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

 

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

 

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

 

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

 

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

 

语法：

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

暴露模块成员使用 ：export 关键字

 

三、通过 babel 体验 ES6 模块化

 

01. 环境搭建

 

步骤1: 下载babel

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

步骤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 };

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

 

02. es6模块的导入和导出

 

1. 默认导出与导入export default

 

语法：

默认导出：export default

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

举例：

 

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

let a = 10;
let b = 20;
function fn(){}
export default{
    a,
    b,
    fn
}

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

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

 

执行：

npx babel-node index.js

 

结果：

 

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

 

2. 按需导入和按需导出

 

语法：

按需导出：export let s1 = 10

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

举例：

 

在m.js中：

export  let s1 = 10;

在index.js中：

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

执行：

npx babel-node index.js

结果：

 

 

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

 

 

举例：

 

在m.js中：

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

 

在index.js中

import './m.js'

 

执行：

npx babel-node index.js

 

结果：

 

 

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