浏览器的UMD规范适配

1. UMD规范

地址：github.com/umdjs/umd UMD规范，为了让模块同时兼容AMD和CommonJS规范而出现的，多被一些需要同时支持浏览器端和服务端引用的第三方库所使用。

// 这里是一个自执行函数
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Vue = factory());
}(this, (function () { 'use strict';

  function Vue() {}
  // 这里返回了一个全局的Vue变量
  return Vue;

})));

适配AMD规范

AMD的规范的适配，规范地址：github.com/amdjs/amdjs…

if(typeof define === 'function' && define.amd) {
    define(factory)
}

适配commonJs规范

浏览器不兼容CommonJS的根本原因，在于缺少四个Node.js环境的变量。 参考阮一峰大佬的文章 www.ruanyifeng.com/blog/2015/0…

• module
• exports
• require
• global

下面是一个简单的示例。

var module = {
  exports: {}
};

(function(module, exports) {
  exports.multiply = function (n) { return n * 1000 };
}(module, module.exports))

var f = module.exports.multiply;
f(5) // 5000

上面代码向一个立即执行函数提供 module 和 exports 两个外部变量，模块就放在这个立即执行函数里面。模块的输出值放在 module.exports 之中，这样就实现了模块的加载。

适配commonJs

if(typeof exports === 'object' && typeof module !== 'undefined') { 
    module.exports = factory()
}