从 <script> 标签访问 requirejs 模块

Question

我目前有一个位于远程服务器上的 requirejs 模块，如下所示，它定义了一些 backbone 视图、模型

define(['...'], function() {
   ......
   return {
     model : suggestion_model,
     view : suggestion_view
   };
});

正在动态加载到另一个文件中

let script = $("<script>").attr({
src: "http://localhost:9000/assets/javascripts/autocomplete/autocomplete-model-view.js",
});
console.log(script);
$("head:first").append(script);

当我转到我的标签时，我看到文件已加载，但我无法访问要在任何代码中使用的模块。

我怎样才能在其他一些文件中实际访问这些定义的 requirejs 模块？

Answer 1

您可能无法通过直接将它们注入脚本标记来访问远程 requirejs 模块。您可以尝试以下步骤来访问它们。

假设我们有一个名为 remotemodule

的远程模块

define(['remotemodule'], function() {
   return {
     model : function(){
       return "Im a remote model";
     },
     view : function(){
       return "Im a remote view";
     }
   };
});

要在浏览器中访问它..

您需要先将 requirejs 脚本添加到您的 html 中。

<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js" type="text/javascript"></script>

这应该会给你一个全局对象 require。您可以在 require 上调用 config 函数，通过向脚本指定 path 来定义 remotemodule。

require.config({
            paths: {
                "remotemodule": "https://raggedlostcone.nithinthampi.repl.co/"
            }
        });

然后你可以调用require(["remotemodule"], function callback)来加载脚本。一旦加载脚本，就会执行回调。

require(["remotemodule"], function(loaded_script){
            console.log(loaded_script);
            document.getElementById("remotemodule").innerText = loaded_script.model();
        })

下面是一个简单的演示。

require.config({
            paths: {
                "remotemodule": "https://raggedlostcone.nithinthampi.repl.co/"
            }
        });
        
        require(["remotemodule"], function(loaded_script){
            console.log(loaded_script);
            document.getElementById("remotemodule").innerText = loaded_script.model();
        })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://requirejs.org/docs/release/2.3.6/minified/require.js" type="text/javascript"></script>
</head>
<body>
    <h1 id="remotemodule">
        loading...
    </h1>
</body>
</html>

从 <script> 标签访问 requirejs 模块

Accessing requirejs module from <script> tag

javascript

backbone.js

jupyter-notebook

requirejs