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

【问题标题】：how to require js file in a src file inside <script>?如何在 <script> 内的 src 文件中要求 js 文件？
【发布时间】：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?
看到这个答案：stackoverflow.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>  </script> 我还有 pb

标签： javascript require

【解决方案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">。

【讨论】：