使用 browserify 捆绑依赖于外部库的 UMD 模块答案

【问题标题】：Bundle UMD module that depends on external library with browserify使用 browserify 捆绑依赖于外部库的 UMD 模块
【发布时间】：2015-06-13 23:50:24
【问题描述】：

我正在实现一个应该在 NodeJS 和浏览器（AMD/非 AMD）环境中工作的模块。

它的简化版是这样的：

var Backbone = require('backbone');

module.exports = Backbone.Model.extend({...});

但我不知道如何使它适用于所有环境。

如果我使用全局 Backbone（没有 require），它将无法在 NodeJS 环境中工作
如果我使用 require 并从捆绑包中排除骨干（使用 --exclude backbone） - 它在非 AMD 浏览器中将不起作用（错误：找不到模块 backbone）

是否可以生成 UMD 模块：

在浏览器 (AMD) / NodeJS 环境中使用 require('backbone')
window.Backbone 在浏览器中（非 AMD）？

【问题讨论】：

标签： javascript node.js backbone.js browserify

【解决方案1】：

umd 包有一个 jQuery 插件模式，可以在非 AMD、AMD 或 CommonJS 环境中工作。示例是 jquery，但是您可以将其调整为您自己的不是 jquery 的命名空间模块。

https://github.com/umdjs/umd/blob/master/jqueryPluginCommonjs.js

我过去处理此问题的一种方法是使用 require('namespace') 为插件构建我的独立包，但使用遵循上面链接模式的存根代替真实模块。

bundle
  .require('./namespace-stub', {expose: 'namespace'})
  .require('plugin', {entry: true});

namespace-stub.js 是一个遵循上面链接模式的小模块，但不是调用具有命名空间的函数（取自 AMD、CommonJS 或全局变量），它可以直接导出它。

换句话说，您可以通过用一个模块代替主库包来为插件构建独立包，而主库包实际上只是从碰巧可用的地方寻找并发现真正的库。

【讨论】：