前言
俗话说“好记性不如烂笔头”,此文仅用于记录自我知识库
一、UMD,全称 Universal Module Definition,即通用模块规范。
为了让模块同时兼容AMD和CommonJs规范而出现的,多被一些需要同时支持浏览器端和服务端引用的第三方库所使用。
UMD的实现:
先判断是否支持 AMD(define 是否存在),存在则使用 AMD 方式加载模块;
再判断是否支持 Node.js 模块格式(exports 是否存在),存在则使用 Node.js 模块格式;
前两个都不存在,则将模块公开到全局(window 或 global);
二、实现代码
基本结构
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery', 'underscore'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('jquery'), require('underscore'));
} else {
root.returnExports = factory(root.jQuery, root._);
}
}(this, function ($, _) {
function a(){};
function b(){};
function c(){};
return { b: b, c: c }
}));
vue源码UMD规范
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());
}(this, function () { 'use strict';
···
function Vue (options) {
if (!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
return Vue
}))
三、参考资料
js模块化的各种规范 之 CJS、AMD、CMD、UMD、ESM
浅谈模块化