淘汰赛组件 "Uses require, but no AMD loader is present"

Question

我目前正在 Durandal 项目中工作并研究 Knockout Components in my application. I'm building using Gulp and the gulp-durandal 插件的使用并将其配置为使用杏仁。

我运行遇到一个问题，在导航到我的其中一个使用新注册组件的页面时收到以下错误：

component: function () { return componentBindingValue; }" Message: Component 'myComponent': Uses require, but no AMD loader is present

为了提供尽可能多的信息，这里也是我目前正在使用的 gulpfile。

var gulp = require('gulp');
var durandal = require('gulp-durandal');

gulp.task('durandal', function() {
    durandal({
        baseDir: 'app',
        main: 'main.js',
        output: 'main-built.js',
        almond: true,
        minify: true,
        rjsConfigAdapter: function (rjsConfig) {
            rjsConfig.paths = {
                'text': '../Scripts/text',
                'durandal': '../Scripts/durandal',
                'plugins': '../Scripts/durandal/plugins',
                'transitions': '../Scripts/durandal/transitions',
                'dataservice': 'domain/dataservice'
            };

            return rjsConfig;
        }
    }).pipe(gulp.dest('build'));
});

Answer 1

Durandal Gulp 任务正在使用 wrap 参数调用 r.js，该参数配置为将您的应用程序代码封装在带有 Almond 源的 IFFE 中。不幸的是，Almond 的 require、requirejs 和 define 实现被捆绑在内部，并没有像 Knockout 期望的那样被添加到全局 window 范围。

您可以在 rjsConfigAdapter 中操作 wrap 参数以删除 IFFE 包装器，或者只需将 require/define 添加到 window 对象中解决此问题的应用程序代码。

例如

requirejs.config(config);
window.require = require;
window.requirejs = requirejs;
window.define = define;

Answer 2

我也运行参与其中，但我有一个更简单的前端堆栈，而且我只在一个页面上看到它，即使我在我的站点的多个地方使用了该组件。

事实证明它也可能是竞争条件。我不得不将 ko.applyBindings 放入 document.ready 回调中，一切正常。

淘汰赛组件 "Uses require, but no AMD loader is present"

Knockout Components "Uses require, but no AMD loader is present"

javascript

knockout.js

almond

durandal

gulp