使用 RequireJS 加载 Survey-creator-core 时出现未定义错误

Question

我在我的项目中使用 requireJS，想要加载 Survey-core 和 Survey-creator-core。 当我检查survey-creator-core的js文件时，survey-creator-core对survey-core有依赖性。

当我将其导入到我的 ts 文件中时，我得到了 Survey-core 模块，但 Survey-creator-core 保持未定义。

这是代码

    <script type="text/javascript">
        var require = {
            baseUrl: "/bundles",
            paths: {
                jquery: "/bundles/jquery",
                moment: "/bundles/moment",
                bootstrap: "/bundles/bootstrap",
                select2: "/bundles/select2",
                "knockout" : "/bundles/knockout",
                "survey-core": "/bundles/survey-core",
                "survey-creator-core": "/bundles/survey-creator-core",
                "survey-knockout-ui": "/bundles/survey-knockout-ui",
                "survey-creator-knockout": "/bundles/survey-creator-knockout"
            },
            shim: {
                moment: {
                    deps: ["jquery"]
                },
                bootstrap: {
                    deps: ["jquery", "moment"]
                },
                select2: {
                    deps: ["jquery"]
                },
                "survey-creator-core": {
                    deps: ["survey-core"]
                },
                "survey-creator-knockout": {
                    deps: ["survey-creator-core"]
                }
            },
            deps: ["jquery", "moment", "bootstrap"],
            urlArgs: "v=@version"
        };
    </script>

    <script src="~/lib/requirejs/require.js" asp-append-version="true"></script>

这就是我在我的一个 cshtml 文件中使用它的方式

@section Scripts {
    <script type="text/javascript">
        require(["jquery", "bootstrap", "select2"], function () {
            require(["survey-core", "survey-creator-core"], function (Survey, SurveyCreator) {
                require(["./test"], function (ea) {
                    var c = new ea.test();
                });
            });
        });
    </script>
}

在上面的代码中，SurveyCreator 是未定义的。 调查已成功加载。

Answer 1

很难重现您的示例并查明解决依赖关系图的主要问题是什么。

我已经根据您的代码创建了一个工作示例，但我必须在可能与您的设置不同的假设下进行操作。

主要区别在于我使用了所有“最新”版本的 JavaScript 依赖项，这可能与您的有所不同。这是基于我添加的

package.json

，以便快速启动并运行。

无论如何，我已经在 GitHub 中添加了代码示例，因此您可以运行它并在您的端进行分类。

代码示例

https://github.com/endatix/samples-surveyjs/tree/main/RequireJs.InlineConfiguration

注意示例中的几个主要变化：

1. 我已经重构了通过脚本部分内联的 javascript，以便仅在模块初始化中使用单个必需的调用，例如

   require(["select2", "survey-core", "survey-creator-knockout", "../js/test", "jsonData"], function (select2, Survey, SurveyCreatorKnockout, testJs, jsonData) {...

   。这样做是因为它提高了可读性，并且还使解决依赖关系成为线性，从而简化了解决路径。

2. 对于

   survey-creator-knockout

   ，我添加了所有模块依赖项，尽管这不是必需的，因为库在其模块定义中定义了它们。尽管如此，我还是添加了它们，因为它更加明确和透明。

survey-creator-knockout": {
                    deps: [
                        "survey-core",
                        "survey-creator-core",
                        "survey-knockout-ui",
                        "knockout",
                    ],
                },

示例中的主要文件

_Layout.cshtml

...
 <script type="text/javascript">
        var require = {
            baseUrl: "/bundles",
            paths: {
                jquery: "jquery",
                moment: "moment",
                bootstrap: "bootstrap.bundle",
                select2: "select2",
                knockout: "knockout-latest",
                "survey-core": "survey.core",
                "survey-creator-core": "survey-creator-core",
                "survey-knockout-ui": "survey-knockout-ui",
                "survey-creator-knockout": "survey-creator-knockout",
                "jsonData": "../js/json-data"
            },
            shim: {
                moment: {
                    deps: ["jquery"],
                },
                bootstrap: {
                    deps: ["jquery"],
                },
                select2: {
                    deps: ["jquery"],
                },
                "survey-creator-core": {
                    deps: ["survey-core"],
                },
                "survey-knockout-ui": {
                    deps: ["survey-core", "knockout"],
                },
                "survey-creator-knockout": {
                    deps: [
                        "survey-core",
                        "survey-creator-core",
                        "survey-knockout-ui",
                        "knockout",
                    ],
                },
            },
            deps: ["jquery", "bootstrap", "moment"],
            urlArgs: "v=@version"
        };
    </script>
    <script src="~/lib/requirejs/require.js" asp-append-version="true"></script>
...

首页\Index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

<div id="surveyCreatorContainer" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%"></div>

@section Scripts {
    <script type="text/javascript">
        require(["select2", "survey-core", "survey-creator-knockout", "../js/test", "jsonData"], function (select2, Survey, SurveyCreatorKnockout, testJs, jsonData) {
            console.log("Survey:", Survey);
            console.log("SurveyCreatorKnockout:", SurveyCreatorKnockout);

            if (SurveyCreatorKnockout && jsonData) {
                $(function () {
                    const options = {
                        showLogicTab: true,
                    };
                    const creator = new SurveyCreatorKnockout.SurveyCreator(options);
                    creator.JSON = jsonData.surveyJSON;
                    creator.render("surveyCreatorContainer");
                });
            }
        });
    </script>
}

不确定您是否已经检查过这一点，但这是带有 RequireJS 的 SurveyJS 的官方示例，我发现它也非常有用 - https://github.com/surveyjs/requirejs-example/blob/master/index.html

希望这有帮助！