4

我正在使用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 是否在自身内部异步执行，这部分是不是我没有正确处理的 browserify 预期行为？我认为由于我将很多 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'
        }
    }

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

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

1 回答 1

0

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

也就是说，browserify 将生成一个内部定义为 require 的文件。require 函数在页面上不是全局可用的，您包含在 require 中的依赖项也不是。您可以在应用程序中使用它们，但这不会使它们在页面中可用。因此，如果您遇到 Backbone is not defined 错误，我首先要检查的是您是否已通过 npm ( npm install backbone --save) 安装了主干。

一旦一切都设置好了，你应该只需要在页面上包含你编译的脚本，然后让你的匿名自执行函数（现在应该在 grunt-browserify 正在处理的文件中）完成工作来启动你的应用程序。

于 2014-07-19T00:04:05.873 回答