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

Question

In vanilla browser-based JavaScript, I can do this: 在基于浏览器的原始JavaScript中，我可以这样做：

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

Then: 然后：

// file1.js

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

And: 和：

// file2.js

abc(36);

...and things behave as expected. ...而且一切都按预期进行。 (Ie, "abc received 36" is printed to the console.) （即，将“ abc receive 36”打印到控制台。）

How can I include functions from file1.js in file2.js in node.js, so as to preserve the functionality above, while also keeping the web page as-is? 如何在node.js的file2.js中包括来自file1.js的功能，以保留上述功能，同时又保持网页原样？ Specifically, I would like to keep the html as it appears above, while being able to run 具体来说，我希望保留上面显示的html，同时能够运行

node file2.js

at the command line, and getting abc received 36 at the terminal. 在命令行中，在终端获取abc received 36 。

Edit 编辑

I found this question with a very similar motivation, by a seemingly more advanced user. 我看似更高级的用户发现这个问题的动机非常相似。 But the main link in the answer to that question is dead, and I don't understand how the stated answer works, or what it's supposed to do. 但是，该问题答案的主要链接已死，我不明白所述答案的工作原理或应做的事情。 Maybe someone can provide me with a MWE tailored to my file1.js , file2.js ? 也许有人可以为我提供针对我的file1.js和file2.js的MWE？

Answer 1

In order for scripts to be functional as both Node.js modules and browser vanilla (non-modular) scripts, they should be defined as UMD modules . 为了使脚本既可以用作Node.js模块又可以用作浏览器原始（非模块化）脚本，应将它们定义为UMD模块。

UMD is basically a boilerplate factory function that detects modular environment and falls back to global variables if needed. UMD基本上是样板工厂功能，它可以检测模块化环境，并在需要时使用全局变量。

Eg for CommonJS and globals (no AMD) the definition would be: 例如，对于CommonJS和globals（没有AMD），定义为：

file1.js 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 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);
}));

Omitting this boilerplate is the task that bundling tools are supposed to solve, notably Browserify that is intended specifically to bundle CommonJS modules to browser scripts. 忽略此样板是捆绑工具应解决的任务，尤其是Browserify，该工具专门用于将CommonJS模块捆绑到浏览器脚本中。

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

问题描述

Edit 编辑

1 个解决方案

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

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

问题描述

Edit 编辑

1 个解决方案

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

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