时间戳

首页 > 解决方案 > 将requirejs和plain js文件合并在一起

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>

（真实的在这里可见）。

以下是未缩小的文件：

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

编辑

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

标签： javascriptmergemodulerequirejsbundle

解决方案

我有点困惑。您说您对前 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".
});

并且需要acewindow.onload模块的事件处理程序将被移动到main.js文件中。

现在如果你想将这 4 个文件捆绑到一个文件中，那么假设你已经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>

推荐阅读