如何使用 require.js 和复杂的源代码树，或者从 CommonJS 的 main.js 导入其他东西？

Question

我的 JS 代码是基于 Backbone.js 的，所以我认为用这个逻辑分隔“类”是一个好主意，如图所示（虽然我不确定在哪里放置模板 - 在这个包中或全局中templates 文件夹，不要介意 main.js - 它与 CommonJS 包无关）：

现在因为它们相当多 - 我决定使用 require.js 来处理这一堆 <script src=... 标记，但被 app.js 配置文件卡住了（这是我包含的唯一一个喜欢这 -

<script data-main="/static/js/app.js" src="/static/js/libmin/require.js"></script>

stuck 是什么意思 - 当然，我可以在 require 语句中使用 PlayerApp/PlayerAppController.js 之类的名称或使用 paths 指令迭代所有这些 js 文件（不确定是否会让代码看起来不那么难看），但是如果我可以使用 python 的from package import * 之类的东西会很酷，当然require.js 中没有这样的东西。

最相似的是packages 指令，但似乎它只允许您从每个包中导入main.js，所以问题是-从@ 加载具体包的其他文件的最正确方法是什么987654338@的main.js？我什至找到了一种方法来确定当前 .js 文件的名称和路径 - like this，并且考虑到我可以在当前包中组成其他文件名（如果我将继续使用相同的模式命名它们），但仍然没有知道如何从main.js导入它们

编辑：

可能有人认为我不太清楚我到底在问什么，所以让我直截了当地说：到底如何以最好的方式导入具有该项目结构的大量 javascript 文件？

Answer 1

您误解了模块加载器的用途。 require.js 不是为了让您可以轻松地将所有包导入当前命名空间（即浏览器）。它可以让您轻松导入运行app.js 所需的所有内容（基于您的data-main 属性）。不要尝试import * - 而只是import thingYouNeed。

配置

您需要做的是为您的require.config() 调用设置不支持 AMD 的 Backbone 等库的所有必要路径，然后更新 您的 代码以显式声明其依赖项：

require.config({
  // Not *needed* - will be derived from data-main otherwise
  baseUrl: '/static/js/app',
  paths: {
    // A map of module names to paths (without the .js)
    backbone: '../libmin/backbone',
    underscore: '../libmin/underscore',
    jquery: '../libmin/jquery.min',
    jqueryui.core: '../libmin/jquery.ui.core'
    // etc.
  }
  shim: {
    // A map of module names to configs
    backbone: {
      deps: ['jquery', 'underscore'],
      exports: 'Backbone'
    },
    underscore: {
      exports: '_'
    },
    jquery: {
      exports: 'jQuery'
    },
    // Since jQuery UI does not export
    // its own name we can just provide
    // a deps array without the object
    'jqueryui.core': ['jquery']
  }
});

依赖关系

您需要更新您的代码以实际使用模块并声明您的依赖项：

// PlayerAppModel.js
define(['backbone'], function(Backbone) {
    return Backbone.Model.extend({modelStuff: 'here'});
});

// PlayerAppView.js
define(['backbone'], function(Backbone) {
    return Backbone.View.extend({viewStuff: 'here'});
});

// PlayerAppController.js
define(['./PlayerAppModel', './PlayerAppView'],
function(Model, View) {
    // Do things with model and view here
    // return a Controller function of some kind
    return function Controller() {
      // Handle some route or other
    };
});

现在，当你require(['PlayerApp/PlayerAppController'], function(Controller) {}) requirejs 会自动为你加载 jQuery、下划线和 Backbone。如果你从未真正使用 mustache.js，那么它永远不会被加载（当你使用 r.js 编译器优化你的代码时，额外的代码也会被忽略）。