umd格式

umd格式是啥？

umd格式是一种通用模块，他同时支持AMD、CJS、ESM模块和全局变量的方式

umd格式打包后的基本代码结构如下:

(function (root, factory) {if (typeof define === 'function' && define.amd) {// AMDdefine(['dependency'], factory);} else if (typeof exports === 'object') {// CommonJSmodule.exports = factory(require('dependency'));} else {// 浏览器全局变量(root 即 window)root.returnExports = factory(root.dependency);}
}(this, function (dependency) {// 模块的实际代码部分return {};
}));

实际打包后可以看到类似这样的代码：

function (e, t) { "object" === typeof exports && "object" === typeof module ? module.exports = t() : "function" === typeof define && define.amd ? define([], t) : "object" === typeof exports ? exports["sub-app-main"] = t() : e["sub-app-main"] = t() }

回顾各个模块的对比

1. CommonJS

Node.js 采用的规范
使用 `require` 和 `module.exports`
同步加载
主要用于服务器端

代码：

// 导出
module.exports = { ... }
// 导入
const module = require('./module')

2、ESM

基本

ES6 官方规范
静态导入导出
支持树摇(tree-shaking)

// 导出
export default { ... }
// 导入
import module from './module'

esm的静态是啥？

1、在顶层使用，不能在函数和if等语句中使用。

2、在代码执行之前，编译阶段就能确定模块依赖关系，从而树摇。

3、可以用es6+的import函数来动态引入，这个函数返回promise。

3、AMD（老）

异步加载模块
RequireJS 的规范
主要用于浏览器端

define(['dependency'], function(dependency) {return { ... }
});

UMD的用途

1、开发需要跨平台兼容的库
2、不确认使用环境的第三方包

3、微前端框架，比如qiankun

如何配置打包为umd格式？

配置

以webpack为例，主要设置output.library.type 为 umd 即可。

简易代码：

module.exports = {//其他配置// 输出配置output: {path: path.resolve(__dirname, 'dist'),filename: 'my-library.js',library: {name: 'MyLibrary', // 库的全局变量名type: 'umd',       // 输出的模块格式},}
}

output.library.type各个值的意义

官网：

Output | webpack 中文文档 | webpack中文文档 | webpack中文网webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换、打包或包裹任何资源。https://www.webpackjs.com/configuration/output/#outputlibrarytype

其他人博客：

https://juejin.cn/post/7140619769853509640

1、一般的前端项目进行配置，打包之后就是匿名函数自执行，不会暴露什么全局变量啥的，如果这个项目要供其他项目使用，就进行设置output.library.type。

2、开发第三方库时，可以设置为umd，这样就能支持多种环境了。

3、设置var或window，这样会将模块导出内容挂到window上，代码如下：

window['MyLib'] = (() => {// webpack 运行时代码return {// 你的模块导出内容someMethod: function() { ... }};
})();//使用：
// 可以直接通过 window 访问
window.MyLib.someMethod();
// 或者直接使用
MyLib.someMethod();