gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 00:25:16 25 4
gpt4 key购买 nike

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

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com