将 requirejs 和普通 js 文件合并在一起

Question

将 requirejs 和普通 js 文件合并在一起

fel*_*lix 11 javascript merge bundle module requirejs

我正在开发一个小型网站，主要的 HTML 页面基本上如下所示：

<html lang="en">
  <head>
    <script src="ace.js" type="text/javascript"><script>
    <script src="ext-language_tools.js" type="textjavascript"></script>
    <script src="mode-mongo.js" type="text/javascript"></script>
    <script src="playground.js" type="text/javascript"></script>
    <script type="text/javascript">
    
      window.onload = function() {
    
        ace.config.setModuleUrl("ace/mode/mongo", "mode-mongo.js")
    
        configEditor = ace.edit(document.getElementById("editor"), {
            "mode": "ace/mode/mongo",
            "useWorker": false
        })
      }
    </script>
  </head>
  <body>
    <div class="editor">
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

（真实的可以在这里看到）。

以下是未缩小的文件：

前3个js文件使用requirejs，第4个只是普通js

有没有办法将这 4 个文件合并到一个文件中，以便在我的 HTML 中包含类似的内容？

<html lang="en">
  <head>
    <script src="bundle.js" type="text/javascript"><script>
    <script type="text/javascript">
    
      window.onload = function() {

        configEditor = ace.edit(document.getElementById("editor"), {
            "mode": "ace/mode/mongo",
            "useWorker": false
        })
      }
    </script>
  </head>
  <body>
    <div class="editor">
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

编辑

我的目标是在单个 HTTP 请求中一次加载所有这些 js 代码

Answer 1

Ste*_*eve 2

这是一个有趣的问题，因为 JavaScript 和 Web 开发中有许多跨越几个时代和理念的潜在解决方案。我将讨论最简单和最古老的文件串联，并简要介绍 RequireJS 以及使用专用 Web 捆绑器的更现代的方法。还有一个未说明的、潜在的假设，即为什么您觉得需要捆绑它——可能有一些文件加载的假设可能不正确，特别是对于 HTTP/2。

快速方法

如果您想要快速、简单且老式的东西，您可以将所有 JavaScript 文件组合（连接）在一起。这本质上就是初始网页中发生的情况：浏览器下载所有 JavaScript 文件并按顺序运行它们。

使用 Unix/Linux/OS X 连接：

cat path/to/ace.js  <(echo) \
  path/to/ext-language_tools.js  <(echo) \
  path/to/mode-mongo.js  <(echo) \
  path/to/playground.js \
  > path/to/bundle.js

Run Code Online (Sandbox Code Playgroud)

（如果删除 s，则可以将它们全部合并到一行中。如果您知道文件以新行结尾，\也可以省略）<(echo)

或者，您可以手动将文件复制并粘贴到一个大文件中。

RequireJS 方式

值得一提的是 RequireJS 的做事方式，即使用require语句，因为这就是 ace.js 的开发理念。使用这种理念，文件旨在作为模块保持分离并根据需要加载。其他答案更详细地解释了这种方法，但我会补充说，捆绑似乎不是使用 RequireJS 的惯用方式——该库最初打算（尽管不需要）将模块拆分为不同的文件。

Web 捆绑器方式

近年来，人们采用 Web 捆绑器（例如 webpack、parcel、rollup 等）来管理多个文件和依赖项。这些工具旨在输出单个 Web 包，并为此提供了许多不错的可自定义功能。他们可能需要一些工作才能启动和运行，并且需要使用 CommonJS 插件才能开始require工作。例如，请参阅此处以获取 ace 使用 webpack 的信息。

需要捆绑吗？

根据您的顾虑和情况，捆绑可能不是您需要的优化。从历史上看，捆绑被用作最小化网络请求的一种方式，因为网络连接的数量是有限的，有时文件请求其他文件，导致串行加载。其中许多问题已通过 HTTP/2 得到解决。只需确保您的 Web 服务器支持 HTTP/2 并且您正在提供该服务器上的所有文件。有关此问题的更多信息，请参阅此问题。您可能最关心它在实践中的运作方式，因此您可能希望以任何一种方式对其进行基准测试，但您可能不会获得太多收益。

归档时间：	4 年，4 月前
查看次数：	979 次
最近记录：	4 年，4 月前