2017-12-26__umd.md

笔记

umd

umd的实现

umd的实现思路很简单，首先会判断当前的环境是否支持 Commonjs（node），再判断是否支持 AMD ，如果不支持便挂载在全局上

(function (root, factory) {
  if (typeof exports === 'object' && typeof module === 'object') {
    // commonjs2
    module.exports = factory();
    // 如果有依赖 如 vue
    module.exports = factory(require('vue'));
  } else if (typeof define === 'function' && define.amd) {
    // amd
    define('myLibrary', factory);
    // 依赖
    define('myLibrary', ['vue'], factory);
  } else if (typeof exports === 'object') {
    // commonjs
    exports['myLibrary'] = factory();
    // 依赖
    exports['myLibrary'] = factory(require('vue'));
  } else {
    // 挂载在全局
    root['myLibrary'] = factory();
    // 依赖
    root['myLibrary'] = factory(root['vue']);
  }
}(this, function (module) {
  // module 是依赖
  return {
    add: function (a, b) {
      return a + b;
    }
  }
}))

以上代码是 webpack 生成umd格式的代码

这样，这个模块就可以用在各种环境中了，通过<script>标签导入，或者amd commonjs