如何在浏览器中将旧版 JavaScript 与 NodeJS 集成答案

【问题标题】：How to integrate legacy JavaScript with NodeJS in the browser如何在浏览器中将旧版 JavaScript 与 NodeJS 集成
【发布时间】：2017-05-07 09:17:25
【问题描述】：

假设的遗留场景：

假设我有 4 个脚本，它们简单地连接在一起作为单个脚本进行部署，以在浏览器中提供一个具有全局命名空间的实用程序库。然后，我有 1 个使用该库的单独应用程序脚本。比如：

<script src="library.js"></script>
<script src="app.js"></script>

在我的 app.js 脚本中，通过其命名空间调用库方法，例如

var id = lib.id(prefix);

我看到 4 个库脚本中的 1 个是一个有用的实用程序，我想将其转换为 Node 模块。我复制它并创建一个包并将其发布到 npm 以用于新的开发。

问题：现在我要维护这个脚本的两个版本 - 一个用于 Node，一个用于旧库。

有没有一种方法可以让我在 Node 模块和遗留库中都包含一个通用文件？还是在我们逐步淘汰遗留代码之前，我是否坚持维护文件的两个版本？

附加信息：

我查看了 browserify 和 webpack，认为它们可能有用，但它们都遇到了一个我不知道如何解决的问题。除非最终模块定义了全局变量，否则我不能在遗留代码中使用该模块，因为没有可用的 require 命令。换句话说，我无法浏览 Node 模块，然后将其放入旧网页并在我现有的 app.js 中使用它，因为我无法调用 var mymodule = require('mymodule')。有没有办法让 browserify 或 webpack 定义和公开一个 require 函数，让我从遗留代码库访问我的新 Node 模块？当然，这不是一个独特的场景。

【问题讨论】：

我不使用 webpack，但是使用 jspm 或 rollup 可以将脚本构建为 UMD，因此可以通过特征检测将其用作全局、AMD 和 Commonjs。

标签： javascript node.js browser integration legacy

【解决方案1】：

您最好的选择是使用UMD pattern 以确保该模块既可以用作全局系统，也可以用于 commonJS（即节点）系统。

最适合您的模式是returnExports。这样可以确保所有导出的属性都应用于全局对象（即窗口）或节点中的模块对象。

由于您没有使用 AMD，您可以稍微简化模式并删除第 18 行和第 42 行的 if 语句的第一块。

这需要你重新组织你的代码以适应模式。

你可以使用其他模式，例如commonJsStrictGlobal，但我个人更喜欢returnExports。

【讨论】：

这似乎无法解决我的问题，所以我需要更清楚地说明我的问题。想象一下，我有 4 个（旧版）脚本连接在一起成为一个脚本。假设我将脚本 #2 复制到另一个项目，从中创建一个 Node 模块，然后通过 npm 发布它。现在，我想用 require 调用有效地替换旧代码中的 #2 脚本。或者你是说我会以某种方式包含节点项目中的新脚本文件，假设我使用 UMD 模式编写它？如果是这样，如何从 npm 模块访问它？
是的。这个想法是，您可以在节点中（即作为 commonJS 模块）以及在脚本标签中（即在全局上下文中）使用 exactly 相同的文件。大概，您会将文件的 UMD 变体发布为 npm 模块。安装后，您很可能希望创建一个构建步骤（使用 gulp、grunt、npm 脚本或您最喜欢的任务运行程序），将所需的 UMD 文件复制到 Web 应用程序中的适当位置。由于您使用的是 UMD 模式，因此您将能够直接从脚本 #2 访问全局变量。
我看到你说脚本是串联的，但你上面的问题使用了单独的脚本标签。这并不重要。如果它们被连接，您只需要确保从 npm 模块中获取正确的文件进行连接。
对不起，如果示例令人困惑 - 在示例中，library.js 是四个脚本的串联，app.js 依赖于该库。但这是我正在尝试组装的库脚本，它现在与 NodeJS 模块共享一个脚本。所以我想我需要弄清楚的是，如何从需要使用 UMD 模式编写的节点模块中包含该脚本。对吗？
是的，但是这样做很简单。由于您使用的是 UMD 模式，因此您可以按原样连接。这就是UMD背后的目标。它可以在不同的模块上下文中使用。