javascript - 将requirejs和plain js文件合并在一起

我正在开发一个小型网站，主 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>

(真实的可见here)。
以下是未缩小的文件:

ace.js

ext-language_tools.js

mode-mongo.js

playground.js

前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>

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

最佳答案

我有点困惑。您说您对前 3 个文件使用了 requirejs，但这不是我对如何使用 requirejs 的理解。您通常会有一个主 JavaScript 文件(我们称之为 main.js)，而您的 HTML 将加载单个 JavaScript 文件，即 require.js 文件，该文件将指定要加载的 main.js 文件:

<html lang="en">
  <head>
    <script src="require.js" data-main="main"><script>
    <!-- The following does not currently use require.js: -->
    <script src="playground.js"><script>
    <script>
    
      window.onload = function() {

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

然后在 main.js 中，您将使用 require() (或 requirejs() )加载您需要运行的任何其他脚本。例如:

require(["ace"], function(ace) {
    //This function is called when scripts/ace.js is loaded.
    //If ace.js calls define(), then this function is not fired until
    //ace's dependencies have loaded, and the ace argument will hold
    //the module value for "ace".
});

和 window.onload需要 ace 模块的事件处理程序将移至 main.js 文件中。
现在如果你想将 4 个文件 bundle 到一个文件中，那么假设你有 Node.js安装最简单的方法是首先使用 npm 安装 requirejs:

npm install -g requirejs

接下来安装uglify:

npm install uglify-js -g

然后在包含您的脚本的目录中创建一个新的 JavaScript 文件 main.js:

require(['ace', 'ext-language-tools', 'mode-mongo', 'playground'], function(ace) {
    window.onload = function() {
        configEditor = ace.edit(document.getElementById("editor"), {
            "mode": "ace/mode/mongo",
            "useWorker": false
        });
    };
});

然后从脚本目录执行:

r.js -o name=main out=bundle.js

如果您在 Windows 下运行，则需要替换 r.js上面有 r.js.cmd .这应该给你一个单一的、缩小的文件 bundle.js。如果您不想缩小文件，则:

r.js -o name=main out=bundle.js optimize=none

然后修改你的 HTML 看起来像:

<html lang="en">
  <head>
    <script src="require.js" data-main="bundle"><script>
  </head>
  <body>
    <div class="editor">
  </body>
</html>

当然，您不需要 window.onload您的 main.js 中的事件:

require(['ace', 'ext-language-tools', 'mode-mongo', 'playground'], function() {});

然后你的 HTML 变成:

<html lang="en">
  <head>
    <script src="require.js" data-main="bundle"><script>
    <script>
        require(['ace'], function(ace) {
            window.onload = function() {
                configEditor = ace.edit(document.getElementById("editor"), {
                    "mode": "ace/mode/mongo",
                    "useWorker": false
                });
            };
        });
    </script>
  </head>
  <body>
    <div class="editor">
  </body>
</html>

关于javascript - 将requirejs和plain js文件合并在一起，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69580262/

javascript - 将requirejs和plain js文件合并在一起

上一篇：javascript - 我应该在 Promise.all 中使用 await 吗？

下一篇：javascript - 403 响应代码 - 使用 Cowin setu API 时请求被阻止