Question

我们想要创建一个应用程序布局，其中包含一个需要包的主模块。每个包（包括主模块）都有自己的第三方库和其他本地包的依赖关系。因此，在每个包的main.js中，我们有一个require.config部分，如下所示：

require.config({
  packages: ["package2"],
  context: 'package1',
  shim: {
    'underscore': {
      exports: '_'
    }
  },

  paths: {
    underscore: '../lib/underscore-1.4.3'  
  }
});

正如您所看到的，配置定义了路径和包。顶级main.js如下所示：

require.config({
  packages: ["package1"]
});

项目有一个类似的目录结构......

├── package1
│   ├── package1.jade
│   ├── package1.js
│   └── main.js
├── lib
│   ├── backbone-0.9.10.js
│   └── underscore-1.4.3.js
├── package2
│   ├── package2.js
│   ├── main.js
└── main.js

我们的目标是拥有一套“软件包”，软件包和页面不仅仅依赖于模块。在完美的工作中，项目的依赖图看起来像这样：

   +------------+           +-------------+
   |  package1  +--+     +--+  package2   +--+
   +------------+  |     |  +-------------+  |
                   |     |                   |
                   v     v                   v
                +--------------+       +--------------+
                |  package3    |       |  package4    |
                +----------+---+       +--------------+
                           |
                           |             +-------------+
                           +------------>|   common    |
                                         +-------------+

在每个包的内部，我们也有一个项目结构。为我们的JS创建模块化架构。这种风格是否可以使用require.js和它的包，或者我们是否认为包错了？如果有，那么有一个js依赖管理库可以帮助我们完成这个架构吗？

我们在github上汇总了一个示例结构，https://github.com/austinbv/require_js_package_sample

最后我们在要求邮件列表 https://groups.google.com/forum/?fromgroups=#!topic/requirejs/bNj4mXNWq-8 上问了同样的问题，但是没有看到太多的兴趣，所以我们来到这里。如果列表更新，我一定会更新我的问题。

Answer 1

我不知道RequireJS中的包是什么，除了支持已经以CommonJS Package格式构建的代码。您是否可以打开模块以提供相同的基于组件的结构？

我使用模块来提供这样的结构。每个模块在AMD.js中定义如下：

define(
  [
    // Paths and shims defined in configuration of RequireJS application.
    'utils', 
    'jQuery',
    'underscore',
    // Component's view and behaviour if any.
    'text!./main.html',
    'text!./main.js',
    // Other dependencies.
    'Components/Commons/Component/AMD.js',  // Component Class.
    'Components/Views/ProductsTile/AMD.js', // Required component.
    ...
  ],
  function (...) {
    ...
    return new Component(args);
  }
);

简化项目的结构如下：

SimplifiedProject
├── Assets
│   ├── css
│   │   ├── main.css
│  ... ...
│   └── img
│       └── noImage.jpg
├── Components
│   ├── Application.js
│   ├── Commons
|   |  ...
│   │   └── Utils
│   │       └── AMD.js
│   ├── Libs
│   │   ├── jQuery
│   │   │   └── jquery.min.js
│   │   ├── RequireJS
│   │   │   ├── plugins
│   │   │   │   ├── json.js
│   │   │   │   └── text.js
│   │  ...  └── require.js
│   ├── Models
│   │   └── Product
│   │       ├── AMD.js
│   │       └── Model.js
│   ├── Controllers
|   |   ...
│   └── Views
│       ├── Main
│       │   ├── AMD.js
│       │   ├── main.css
│       │   ├── main.html
│       │   └── main.js
│      ...
│       └── ProductsTile
│           ├── AMD.js
│           ├── main.css
│           ├── main.html
│           └── main.js
├── favicon.ico
└── index.html

您可以找到整个未完成的项目here。

你发布问题已经三个月了，我很想知道你是如何解决的。请让我知道。

使用require.js包来管理大型应用程序

1 个答案: