如何使用复杂源树的require.js，或从CommonJS'es 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>

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

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

导入它们

修改

可能有一种观点认为我不知道究竟是什么问题，所以让我直截了当地说：在地球上如何以最好的方式导入大量的javascript文件？ / p>

Answer 1

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

配置

您要做的是设置require.config()调用，其中包含Backbone等不支持AMD的库的所有必要路径，然后更新您的代码以明确声明其依赖关系：

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编译器优化代码时，额外的代码也会被忽略）。