如何以与 Node.js 和浏览器 JavaScript 同时兼容的方式跨文件导入 JavaScript 函数答案

【问题标题】：How to import JavaScript functions across files in manner that is simultaneously compatible with Node.js and with browser JavaScript如何以与 Node.js 和浏览器 JavaScript 同时兼容的方式跨文件导入 JavaScript 函数
【发布时间】：2019-04-28 17:34:22
【问题描述】：

在 vanilla 基于浏览器的 JavaScript 中，我可以这样做：

<html>
<head>
</head>
<body>
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
</body>
</html>

然后：

// file1.js

function abc(foo) {
    console.log("abc received:", foo);
}

还有：

// file2.js

abc(36);

...事情按预期运行。（即，“abc received 36”打印到控制台。）

如何在 node.js 中包含 file1.js 中的 file2.js 中的函数，以便在保留上述功能的同时保持网页原样？具体来说，我想保留上面显示的 html，同时能够运行

node file2.js

在命令行，并在终端获取abc received 36。

编辑

我发现this 的问题具有非常相似的动机，由一个看似更高级的用户提出。但是该问题的答案中的主要链接已经死了，我不明白所述答案是如何工作的，或者它应该做什么。也许有人可以为我提供适合我的file1.js、file2.js 的 MWE？

【问题讨论】：

使用 ES6 模块。最新的 node.js 和浏览器都支持它们。

标签： javascript node.js

【解决方案1】：

为了使脚本既可以用作 Node.js 模块又可以用作浏览器 vanilla（非模块化）脚本，它们应定义为 UMD modules。

UMD 基本上是一个样板工厂函数，它检测模块化环境并在需要时回退到全局变量。

例如对于 CommonJS 和 globals（没有 AMD），定义是：

file1.js

(function (root, factory) {
    if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // Node
        module.exports = factory();
        // Global
    } else {
        root.file1 = factory();
    }
}(this, function () {
    // module body
    function abc(foo) {
        console.log("abc received:", foo);
    }

    return { abc: abc };
}));

file2.js

(function (root, factory) {
    if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // Node
        module.exports = factory(require('./file1'));
        // Global
    } else {
        root.file2 = factory(root.file1);
    }
}(this, function (file1) {
    // module body
    file1.abc(36);
}));

忽略这个样板是捆绑工具应该解决的任务，特别是专门用于将 CommonJS 模块捆绑到浏览器脚本的 Browserify。

【讨论】：

如果file1 包含多个函数，加上像const sin = Math.sin 这样的声明怎么办？如果要从file2 导入几个不同的files？（很抱歉，我不清楚如何概括语法：/，我很迷茫，不明白发生了什么。）
那么问题应该包含你的真实需求。答案和问题一样好。我已经尝试更新它。无论如何，我建议坚持使用 Node 模块并使用 Browserify 在浏览器中运行它们。浏览器中无需单独的文件。
是的，我的错。您的更新回答了“几个功能”的问题，但没有回答“要导入的几个文件”的问题。这种方法不可能吗？（我认为与此同时，实际上我只是在复制粘贴我的代码。在截止日期之前没有时间学习 Browserify。）
您将需要传递几个依赖项，例如factory(require('./file1'), require('./file3'))、factory(root.file1, root.file3)、function (file1, file3) { 等。这是非常简单的模式。有一个功能。依赖项应该作为参数传递给它。实际上，关于 Browserify 没有什么可学习的，它是 browserify node-entry-script.js > browser-output.js。你会浪费更多的时间用模块包装器重新发明轮子。