如何在 <script> 内的 src 文件中要求 js 文件？

Posted 2023-02-24

【中文标题】如何在 <script> 内的 src 文件中要求 js 文件？

【英文标题】：how to require js file in a src file inside <script>?

【发布时间】：2022-01-01 03:06:33

【问题描述】：

我希望这很清楚，我需要在 html 文件中导入一个 JS 文件。所以我使用src 属性如下：

<script src="my/js/file/1.js">
<!-- Some JS script here -->
</script>

但是有一件事...在我的 JS 文件的第 1 行中，有一个 require("another/file.js")...所以我的浏览器控制台出现错误：require is not defined。如何解决？

编辑

我会尽量说清楚：

我有 3 个文件，1 个 HTML 和 2 个 JS

上面的脚本标签在我的 html 文件中。 在 src 文件中，我需要使用require("my/js/file/2.js" 导入第二个 JS 文件 如果我不使用src 属性，它就可以工作

但是当我添加 src 属性时，我在控制台中收到错误消息

【问题讨论】：

这能回答你的问题吗？ How do I include a javascript file in another JavaScript file?

看到这个答案：***.com/questions/19059580/…

你不能同时添加带有src的脚本并且在脚本标签中包含代码。

@IMSoP 不是真的，或者我错过了 smthg...@War10ck 这与第一个文件无关，使用我的<script src="path/to.js">，我可以获得第一个 JS 文件，但这个文件也有一个require，这是 pb

@Andy 好吧，看起来它正在工作，但即使这样拆分它：html <script type="module" src="file.js"></script> <script> <!-- my code here --> </script> 我还有 pb

【参考方案1】：

require 是 JS 环境提供的内置函数，支持几种不同类型的模块，因此如何将 JS 文件加载到浏览器中取决于编写要使用的模块系统类型。

最可能的情况是：

这是一个 AMD 模块（

非常

不太可能在 2021 年出现）在这种情况下，您可以使用 RequireJS 加载它 它是一个 CommonJS 模块，它依赖于 Node.js 特定的 API（在这种情况下，它不能在浏览器中运行并在浏览器中与之交互，您需要将其构建到 Web 服务中并生成 HTTP对它的请求（例如通过 Ajax））。一些依赖于 Node.js 特定 API 的东西包括： 向未授予浏览器 JS 使用 CORS 访问权限的站点发出 HTTP 请求 非 HTTP 网络请求（如直接访问 mysql 数据库） 从表示为字符串的文件路径读取（或执行任何操作）文件（而不是从<input type="file"> 读取文件） 产生其他进程 它是一个 CommonJS 模块，不依赖于特定于 Node.js 的 API，您可以使用捆绑工具（例如 Webpack 或 Parcel）将其转换为在浏览器中运行。

在您开始尝试实施其中一种解决方案之前，在找出其中哪些选项（所有这些都需要一些您不想浪费的时间和精力）。 p>

阅读模块的文档通常会告诉你。如果你从 NPM 获得它并且它没有提到与浏览器兼容，那么它可能只是 Node.js。

【讨论】：

我不会撒谎，这是一个比我更专业的人做的项目，我真的不知道不同类型的模块。我认为这是一个 CommonJS 模块，但我不能 100% 确定它是否依赖于特定于 Node.js 的 API

尝试阅读它的文档。

我会在我在家的时候阅读它，为我自己的，谢谢 ^^ 有人帮我解决我的问题，我无法说出我们所做的 100% SO，但这与您的答案相似。因此，我会将您的答案标记为正确。如果不显示一些私人内容，我无法解释我们是如何做的，所以我很抱歉。

【参考方案2】：

这可能是因为require() 不是标准 JavaScript API 的一部分。您的代码可能正在使用 Nodejs，这是可能使用 require() 的地方。此外，为了让您选择一个src 文件，您可能还需要包含type，即<script type="text/javascript">。