'define' 在 RequireJS 和 Webapp Yo 生成器上未定义错误

'define' is not defined error on RequireJS & Webapp Yo generator

本文关键字：未定义 错误 Webapp define RequireJS Yo      更新时间：2023-09-26

我花了几天时间才弄清楚这一点，但今天终于需要你的帮助了。
我的回购：https://github.com/seoyoochan/bitsnut-web

我想要实现的目标：
- 加载和优化 r.js - 为 RequireJS 和 r.js 编写 bower 任务：
   任务是：缩小和丑化和连接RequireJS，并在生产
中使用r.js进行优化 - 使用wiredep任务时如何排除index.html中的js脚本标签，并通过RequireJS加载器加载它们？

我使用 Yeoman "Webapp"生成器并生成了脚手架应用程序。

我通过bower install安装了骨干、木偶、文本、下划线等我通过删除dependencies修改了bower.json，只留下"requirejs": "~2.1.16" dependencies.( devDependencies为空(

因为我使用[2][grunt-wiredep]，所以所有内容都自动加载bower_components index.html。我修改了.bowerrc以将依赖项存储在app/scripts/vendor .

但是，问题是我不知道如何通过ReuqireJS成功加载它们，而不是将供应商作为脚本标签加载到index.html。我必须为 RequireJS 和 r.js 编写一些任务，但不知道如何实现这一目标(虽然我安装了grunt-contrib-requirejs(

我想按照第 4 种方法在 https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module 使用 r.js，但我遇到的问题是 RequireJS 的文档确实建议不使用 named module ，而是anonymous module 。我想听听关于我应该如何处理的各种意见。

我非常感谢您的帮助！

你在这里和这里手动加载脚本，使requireJS的全部意义变得无用。您还首先在此处加载main配置.js#L49。

相反，索引中应仅包含此行.html

<script data-main="scripts/config" src="scripts/vendor/requirejs/require.js"></script>

并使用 define() 和 require() 将所有依赖项加载到该文件中(就像处理 main 一样(。由于您设置了 exports ，它将值设置为全局变量，因此函数可以为空。下面是一个示例：

define([
    "jquery",
    "underscore", 
    "backbone",
    "marionette",         
    "modernizr"
], function () {
        require([
        "backbone.babysitter", 
        "backbone.wreqr", 
        "text", 
        "semantic"
    ], function () {
        /* plugins ready */
    });
    define(["main"], function (App) {
           App.start();
    });
});

此外，baseUrl与data-main属性文件夹 (http://requirejs.org/docs/api.html#jsfiles( 的目录相同：

RequireJS 加载与 baseURL 相关的所有代码。baseUrl 是 通常设置为与数据主中使用的脚本相同的目录 要为页面加载的顶级脚本的属性。数据主 属性是一个特殊属性，需要.js将检查才能启动 脚本加载。

所以我认为您在config.js中的baseUrl指向不存在scripts/scripts/文件夹。它可以/应该vendor/(并从所有声明中删除供应商部分(或留空。

您可以尝试使用与wiredep类似但专门针对bower/requirejs应用程序执行类似操作的 https://github.com/yeoman/grunt-bower-requirejs 而不是wiredep (请参阅：https://github.com/stephenplusplus/grunt-wiredep/issues/7(

您的存储库不包含 jQuery 的 dist 文件夹，但除此之外，这里是config.js的工作示例： http://jsfiddle.net/petetnt/z6Levh6r/

至于模块定义，应该是

require(["dependency1", "dependency2"])

并且模块应该返回自身。目前，您的main文件将自身设置为依赖项 

require(["main", "backbone", "marionette"], function(App, Backbone, Marionette){

由于您已经使用 exports 将backbone和marionette设置为全局变量，因此您可以再次将函数属性设置为空，因此您的主文件应如下所示：

require(["backbone", "marionette"], function(){
  "use strict";
  var App = new Backbone.Marionette.Application();
  App.addInitializer(function(){
    console.log("hello world!");
    Backbone.history.start();
  });
  return App;
});

并且由于您已经使用define来加载main，因此不要再次require它。而只需在define函数中调用App.start()。

https://jsfiddle.net/66brptd2/(配置.js(

相关文章：