AMD、CMD、UMD、CommonJS、ES6模块化☀️

最新推荐文章于 2024-12-25 23:00:25 发布

前端imber

最新推荐文章于 2024-12-25 23:00:25 发布

阅读量401

点赞数 1

分类专栏：模块化文章标签：模块化 js

本文链接：https://blog.csdn.net/imber___zsk/article/details/120036169

版权

模块化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AMD：

异步模块定义，AMD是RequireJs在推广过程中对模块定义的规范化产出，它是一个概念，RequireJs是对这个概念的实现。

//定义没有依赖的模块
define(function(){
    return 模块
})
//定义有依赖的模块
define(['module1','module2'],function(m1,m2){
    return 模块
})

CMD：

是SeaJs在推广过程中对模块定义的规范化产出，模块的加载是异步的。SeaJs是淘宝团队提供的一个模块开发框架。模块使用时才会加载执行。不需要使用requirejs和browserify了。

//定义暴露模块

//定义没有依赖的模块
define(function(require,expots,module){
    exports.xxx = value
    module.exports = value
})
//定义有有依赖模块
define(function(require,expots,module){
    //引入依赖模块（同步）
    var module2 = require('./module2')
    //引入依赖模块（异步）
    require.async('./module3',function(m3)){
    })
	//暴露模块
	exports.xxx = value
})

//引入使用模块

//入口js配置
define(function(require){
    var m1 = require('./module1')
    var m4 = require('./module4')
    m1.show()
    m4.show()
})
//页面引入使用
<script src="js/libs/sea.js">
<script/>
    seajs.use('/js/modules/main')
<script>

UMD：

UMD规范只是一种通用的写法，是在amd和cjs两个流行而不统一的规范情况下，才催生出umd来统一规范的，umd前后端均可通用。(好像对CMD也试用，飞冰采用的这种方式)

原理:其实就是在模块中去判断全局是否存在exports和define，如果存在exports，那么以commonjs的方式暴露模块，如果存在define那么以amd的方式暴露模块

CommonJs模块化：

我们熟知的nodeJs就是遵循CommonJs 模块规范。它与AMD最显著的区别的是，同步加载模块、Vue和React脚手架都采用这种方式。

//暴露模块
module.exports=value
exports.xxx=value
//引入模块
require（xxx）
第三方模块：xxx为模块名
自定义模块：xxx为模块文件路径

CommonJS-Browserify:

浏览器不认识，就需要loader，让浏览器认识

下载Browserify（用于把commonJS的模块化语法，翻译成浏览器认识的语法，是一个翻译官）
全局安装browserify，命令：npm install browserify -g(报错就用管理员打开cmd)
管理员身份：打开cmd，再在任务栏右键cmd，然后管理员身份打开

执行处理命令

第一步，cd到指定文件夹，即：app.js所在的文件夹
第二步，输入命令 browserify js/src/app.js -o js/dist/bundle.js(-o是output输出的意思)

ES6模块化：

ES6中正式提出了内置的模块化语法，我们在浏览器端无需额外引入requireJs来实现模块化。

没有s的export是ES6的语法

暴露的本质到底是什么？module.exports所指向的那个对象

ES6模块化：

模块自动运行在严格模式下
在模块的顶级作用域创建的变量，不会被自动添加到共享的全局作用域，它们只会在模块顶级作用域的内部存在；
模块顶级作用域的 this 值为 undefined
对于需要让模块外部代码访问的内容，模块必须导出它们

- 暴露模块 export
  - 分别暴露：export 暴露内容
  - 统一暴露：export {xxx,yyy}
  - 默认暴露：export detfalut 暴露内容
- 引入模块 import
  - import {xxx,yyy} from './module1'
  - import {module3} from './module3'

安装babel-cli，babel-preset-es2015和browserify

浏览器不认识ES6模块化语法，所以需要babel

babel作用

es6 => es5
jsx => js

cli的意思是命令行接口工具

第一步，全局安装：npm install babel-cli browserify -g
第二步，局部安装：npm install babel-preset-es2015 --save-dev
备注：若全局安装过browserify，可以在第一步中去除browserify

根目录创建.babelrc文件（给babel指定任务）

{
    "presets":["es2015"]
}

编译源代码

第一步：使用Babel将ES6编译为ES5代码

命令为：babel js/src -d js/build
第二步：使用Browserify编译js上一步生成的js

命令为：browserify js/build/app.js -o js/build/build.js
备注：第一步操作后Babel将es6的模块化语法，转换成了CommonJS模块化语法（浏览器不识别），

统一暴露和分别暴露和默认暴露的时候可以取别名（防止命名冲突）

//分别暴露和统一暴露的情况，可能{haha as haha1}，默认暴露没必要
import * as haha form ’./module1‘

ES6和commonJS模块化区别：

请看这篇文章

commonjs模块输出的是一个值的拷贝，es6模块化输出的是值的引用
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

总结：

babel把ES6模块化转为CommonJS模块化语法，再使用browserify，让浏览器识别
-o是browserify命令，-d是babel命令
命名冲突取别名

可以混合暴露

import module4，{arr0，bar，foo} from ’./module4‘