Require JS with Knockout 组件在不正确的路径中寻找 js 文件

Question

我试图通过构建 knockout 来了解 require js 的工作原理 components.I 已经构建了 2 个单独的 knockout 组件用于测试。我的目录结构如下：

- App
  |_ Components
     |_ Like-Widget
        |_like-widget.js
        |_like-widget.html
     |_ sign-in
        |_sign-in.js
        |_sing-in.html
     |_ startup.js
- Scripts
    |_ knockout.js
    |_ knockout-es5.js
    |_ app.js

我在app.js文件require.js中配置如下require.js

    require.config({
    paths: {
        ko: "/Scripts/knockout-3.4.0",
        kox: "/Scripts/knockout-es5",
        jquery: "/Scripts/jquery-1.10.2.min",
        text: "/Scripts/text"
    },
    shim: {
        "kox": {
            deps:["ko"]
        }
    },
    baseUrl: "/App/Components"
});

require(["/App/Components/startup.js"]);

这是我的 startup.js 文件

define(['ko'], function (ko) {
ko.components.register('like-widget', { require: 'like-widget/like-widget' });
ko.components.register('sign-in', { require: 'sign-in/sign-in' });
ko.applyBindings();

});

我的 like-widget.js 和 sign-in.js 文件几乎完全相同用于测试目的

define(["kox", "text!like-widget/like-widget.html"], function (ko, template) {

function myViewModel(params) {
    var self = this;
    self.personName = 'Bob';
    self.personAge = 23;
    ko.track(this);
};

return {
    viewModel: myViewModel,
    template: template
};

});

define(["kox", "text!sign-in/sign-in.html"], function (ko, template) {

function signInViewModel(params) {
    var self = this;
    self.userName = 'User 1';
    ko.track(this);
};

return {
    viewModel: signInViewModel,
    template: template
};

});

这就是我在 html 页面中提到 require.js 的方式

 <script type='text/javascript' data-main="/Scripts/app.js" src="~/Scripts/require.js"></script>

问题是我的 like-widget 组件工作正常，但是当我尝试使用我的登录组件时，我收到了一个错误

GET http://localhost:65182/App/Components/knockout.js

未捕获错误："knockout" 的脚本错误，需要：kox http://requirejs.org/docs/errors.html#scripterror

从错误看来，requirejs 正试图从错误的位置加载 knockout，我的 knockout.js 不在组件目录中，而是在脚本目录中。我不明白的是它是如何正确加载 like-widget 组件的？

我是 requirejs 的新手，所以我假设我犯了一些天真的错误，你能指出来吗？

Answer 1

如果您查看 knockout-es5 插件的源代码，您会发现它需要将 knockout 路径设置为 'knockout'，而不是 'ko'。

} else if (typeof define === 'function' && define.amd) {
      define(['knockout'], function(koModule) {
        ko = koModule;
        attachToKo(koModule);
        weakMapFactory = function() { return new global.WeakMap(); };
        return koModule;
      });
}

如果您更改了 knockout 的 require 配置路径

require.config({
    paths: {
        knockout: "/Scripts/knockout-3.4.0",
        // instead of ko: "/Scripts/knockout-3.4.0" 
    }

应该可以。您还可以删除 knockout-es5 的垫片（在您的示例中为 kox），因为它不需要。

Require JS with Knockout 组件在不正确的路径中寻找 js 文件

Require JS with Knockout components is looking for js file in incorrect path

javascript

requirejs

knockout.js

knockout-es5-plugin