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‘