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

标签 javascript node.js

在基于普通浏览器的 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”被打印到控制台。)

如何将 file1.js 中的函数包含在 file2.js 中的 Node.js 中,以保留上述功能,同时保持网页不变-是?具体来说,我想保留上面显示的 html,同时能够运行

node file2.js

在命令行,并在终端获取abc收到36

编辑

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

最佳答案

为了使脚本能够同时充当 Node.js 模块和浏览器普通(非模块化)脚本,它们应定义为 UMD modules .

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

例如对于 CommonJS 和全局变量(无 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 模块捆绑到浏览器脚本。

关于javascript - 如何以同时兼容 Node.js 和浏览器 JavaScript 的方式跨文件导入 JavaScript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52554253/

相关文章:

javascript - 如何使函数内定义的变量 newUser 成为全局变量?

javascript - node.js 中的编码风格

c# - 如何捕获Photoshop的文档区域

javascript - Node js - 使用表单等发布数据重定向到 url

node.js - 使用 Mailchimp API

javascript - 递归:最少的步骤

javascript - Angular 2.0 ng-for 不显示 html 标签内的值

javascript - JsHint 警告其他文件中的函数

javascript - 通过添加 eventListener 取消 Canvas 动画

javascript - 获取一个字符串并用新的 div 替换它