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

Question

在基于浏览器的原始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 receive 36”打印到控制台。）

如何在node.js的file2.js中包括来自file1.js的功能，以保留上述功能，同时又保持网页原样？ 具体来说，我希望保留上面显示的html，同时能够运行

node file2.js

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

编辑

我看似更高级的用户发现这个问题的动机非常相似。 但是，该问题答案的主要链接已死，我不明白所述答案的工作原理或应做的事情。 也许有人可以为我提供针对我的file1.js和file2.js的MWE？

Answer 1

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

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);
}));

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

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

问题描述

编辑

1 个解决方案

解决方案1
0 已采纳 2018-09-28 11:43:07

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

问题描述

编辑

1 个解决方案

解决方案1 0 已采纳 2018-09-28 11:43:07

解决方案1
0 已采纳 2018-09-28 11:43:07