Backbone.Marionette - Grunt Browserify - “要求未定义”答案

【问题标题】：Backbone.Marionette - Grunt Browserify - "require is not defined"Backbone.Marionette - Grunt Browserify - “要求未定义”
【发布时间】：2023-03-13 18:00:02
【问题描述】：

我正在使用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'
        }
    }

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

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

【问题讨论】：

在配置中有别名应该使 require() 暴露 AFAIK。您是否查看了生成的“public-dev/js/app.dev.js”文件？另外，为了确保您确实在 index.html 中正确包含了 public-dev/js/app.dev.js？
@AmitayDobo 我也这么认为，但我遇到了同样的问题，即 require 没有被全局定义

标签： backbone.js automation marionette gruntjs browserify

【解决方案1】：

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

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

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

【讨论】：