什么是UMD

53 min read

什么是UMD

所谓UMD (Universal Module Definition),就是一种javascript通用模块定义规范,让你的模块能在javascript所有运行环境中发挥作用。

什么是模块

模块最终是要导出一个对象,函数,或者变量

一个简单的模块

function factory() {
    return {
        name: '我是一个umd模块'
    }
}

全局导出

(function(root, factory) {
    console.log('没有模块环境,直接挂载在全局对象上')
    root.umdModule = factory();
}(this, function() {
    return {
        name: '我是一个umd模块'
    }
}))

这里的立即执行函数传入参数 this, this 可以是环境变量中的windows或者global,并将上面的模块挂载到全局上去

兼容所有风格

(function(root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        console.log('是commonjs模块规范,nodejs环境')
        var depModule = require('./umd-module-depended')
        module.exports = factory(depModule);
    } else if (typeof define === 'function' && define.amd) {
        console.log('是AMD模块规范,如require.js')
        define(['depModule'], factory)
    } else if (typeof define === 'function' && define.cmd) {
        console.log('是CMD模块规范,如sea.js')
        define(function(require, exports, module) {
            var depModule = require('depModule')
            module.exports = factory(depModule)
        })
    } else {
        console.log('没有模块环境,直接挂载在全局对象上')
        root.umdModule = factory(root.depModule);
    }
}(this, function(depModule) {
    console.log('我调用了依赖模块', depModule)
    return {
        name: '我自己是一个umd模块'
    }
}))

TS的导入导出

class Earth{
    name: string = 'earth';
    rotation(){
        let oneday: string = 'A rotation takes 24 hours.';
        console.log(oneday);
    }
}

let human: string = 'Human being lives on Earth.';

export {Earth, human};

或者

export class Mars{
    name: string = 'Mars';
    status: string = 'China will explore Mars in the following several decades.';
}

export function exploring(){
    console.log('Launching Changzheng-5 rocket.');
    console.log('Add oil, 胖五.')
}

导入

import {Earth, human} from './OnlyOneEarth'
import {Mars, exploring} from './ExploringMars'

let ourEarth: Earth = new Earth();
let mysteriousMars: Mars = new Mars();
console.log(human);
console.log(mysteriousMars.status);
ourEarth.rotation();
exploring();

Node 应用由模块组成,采用 CommonJS 模块规范

导出

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

导入

var example = require('./example.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6