我们在开发一个插件时,通常希望它既可以被服务端引用,也能被客户端浏览器使用,即适用多个平台。于是,在模块加载的处理上,我们通常会采用 UMD(Universal Module Definition)的写法。

所谓的 UMD,主要是针对 CommonJS 或 AMD 规范加载模块的差异,而特意封装的一种通用引入模块的解决方案。

UMD 的基本代码如下:

;(function (context, name, definition) {
if (typeof module != 'undefined' && module.exports) {
// CommonJS
module.exports = definition();
} else if (typeof define === 'function' && define.amd) {
// AMD
define(definition);
} else {
// Browser
context[name] = definition();
}

}(this, 'Countdown', function () {

// 插件主代码
class Countdown {}

return Countdown;
}));

上面的代码,也是我前段时间写的一个倒计时插件(Countdown)最前面的部分代码。当插件在本地开发完成,要开启定时器,只需要在页面里实例化 Countdown 构造函数即可,如:

new Countdown();

一切都进行的很顺利,但当我用webpack编译打包准备发布时,发现编译出错了,提示 Countdown is not defined。怎么回事?经过排查,发现原因出在模块加载上。我们来细看下 UMD:

if (typeof module != 'undefined' && module.exports) {
// CommonJS
module.exports = definition();
} else if (typeof define === 'function' && define.amd) {
// AMD
define(definition);
} else {
// Browser
context[name] = definition();
}

首先,判断是否处于node服务器环境,如果是,则把 插件 挂载到 module.exports。

如果不是,再判断当前环境有没有使用 AMD 规范,如果有,则将 插件 传入到第三方模块加载器(如RequireJS)定义方法中。

如果也没检测到使用 AMD 规范来加载模块,则直接将 插件 挂载到当前环境的全局变量(浏览器为 window),context[name] 中的 context 为 window,而 name 为插件名称,这个名称是包裹 umd 匿名函数调用时传入的参数(倒计时插件为 Countdown)。

而 webpack 编译时,可能是运行在node环境的原因,typeof module != 'undefined' && module.exports 的值竟然为 true,这就导致本该挂载在浏览器 window 对象的 插件,却挂载到了 module.exports。如此一来,浏览器自然获取不到 Countdown 这个构造函数。报 Countdown is not defined 也合乎情理。

那么,如何既保证代码以 UMD 形式输出,又可以让webpack编译通过呢?

一、webpack 处理 UMD

经翻阅文档发现,webpack 在 ouput输出选项上,提供了 libraryTarget 设置,如果用户添加了该选项,并把它的值设置为 umd,像这样:

output: {
...
libraryTarget: 'umd'
}

那么,打包后输出的模块,外部会套一层 umd 代码。

于是,我们需要删除原来插件里 umd 代码,并使用如下方式输出模块:

module.exports = Countdown;

再设置 libraryTarget 选项后,再用 webpack 编译打包一次。果然,打包后的代码前面被 umd 处理了,如下图:

webpack生成umd代码

与之类似的,还有一个 umdNamedDefine 选项,可参见这里

虽然解决了 umd 的输出问题,但控制台还是报 Countdown is not defined

前面说到,针对浏览器环境,我们可以会直接将 插件 挂载到当前环境的全局变量(浏览器为 window)上,即 context[name] = definition()。 而这里的 name 需要你手动指定,比如文章开头代码里的 'Countdown'

类似的,在webpack这里,光指定模块的输出形式是不够的,还需要指定模块的名称,同样的,webpack提供了 library 选项,它的值为模块名称。所以,将配置修改为:

output: {
...
libraryTarget: 'umd',
library: 'Countdown'
}

设置完成后,再webpack编译打包一次,倒计时正常运行了。

二、处理 ES6 的类

在前面处理中,通过 module.exports = Countdown 这种方式来输出模块。我们尝试改为 ES6 的语法,即:

export default class Countdown {
...
}

当webpack再次编译运行时,又报错了 Countdown is not a constructor

Countdown 不是一个构造函数?

在控制台打印 Countdown,发现它是一个包含 default 属性的对象,而 default 的值是一个函数,该函数正是我们所定义的构造函数。

于是,我们得先在页面存储 default 属性,再进行实例化才能正常运行倒计时:

var Countdown = Countdown.default;

new Countdown();

之所以会出现这种情况,是因为我在 webpack 中使用了 Babel 来编译 ES6模块,而 Babel 会将模块编译成一个对象,并把模块指定在该对象的 default 属性。

三、总结

webpack可通过配置 libraryTarget: 'umd' 选项来输出 umd 形式的模块,同时,你需要使用 library 属性来指定模块名称,这种配置一般出现在通用模块或插件中。

使用 Babel 编译的 ES6模块,输出的内容并非模块本身,它被包含在同名对象的 default 属性中。