Question

我正在使用grunt-browserify并特别遇到两个问题。使用以下配置选项成功启动并运行该任务。变量jsFilesToConcat表示Backbone.js + Marionette.js应用程序的所有javascript文件，主要应用程序定义，前端实用程序资产（例如Bootstrap插件）以及与项目关联的所有JS。这是错误的方法吗？我们的想法是一次加载整个250k JS应用程序（及其所有依赖项）。

我想提供免责声明，这对我来说是一个新的领域，所以我认为我的预期用例可以使用插件已有的选项，但我对两个错误感到困惑：

1）Backbone not defined - 这意味着脚本实际上正在加载，但是，当我在Chrome开发工具中检查调用堆栈时，它只显示匿名自调用函数。所以我不清楚如何将Backbone对象传递给Marionette以便在加载时进行扩展。

2）require is not defined - 我声明var SampleApp = require('SampleApp')的行上的错误。我是否需要在我的grunt配置或node.js server.js配置中执行一些特殊操作来公开require函数？

3）javascript本身是异步执行的，这是浏览器化的预期行为的一部分，我没有正确处理？我想因为我在一个全局包装器中包含了很多JS实用程序来保护命名空间，这就是某些功能不可用的原因，但我不清楚为什么会影响require。

    // uses grunt-browserify task
    browserify: {
        developmentJs: {
            options: {
                debug: true,
                alias: ["./js/app.dev.js:SampleApp"],
            },
            src: [
                '<%= pkg.jsFilesToConcat %>'
            ],
            dest: 'public-dev/js/app.dev.js'
        }
    }

然后在我的单页Marionette应用程序的index.html中，我有。

    (function ($) {
        $(document).ready( function() {
            var sampleApp = require('SampleApp');
            console.log( SampleApp );
        });
    })(jQuery);

Answer 1

对于初学者来说，grunt文件中的src属性不需要引用应用程序中的所有文件。它只需要一个入口点。所以通常我在index.js文件中有类似于你的匿名自执行函数，并将我的src配置选项设置为["./index.js"]。当browserify查看该文件时，它将检查对require的调用并获取所有必需的依赖项。

也就是说，browserify将生成一个内部定义为require的文件。 require函数在页面上不是全局可用的，您包含的依赖项也不需要。您可以在应用程序中使用它们，但这不会使它们在页面中可用。因此，如果你得到Backbone没有定义错误，我要检查的第一件事是你已经通过npm（npm install backbone --save）安装了主干。

一旦设置好所有内容，您只需要在页面上包含已编译的脚本，并让您的匿名自执行功能（现在应该在grunt-browserify正在处理的文件中）执行工作以启动您的应用

Backbone.Marionette - Grunt Browserify - “require is not defined”

1 个答案: