4

我们想创建一个应用程序布局，该布局由一个需要包的主模块组成。每个包（包括主模块）对第三方库和其他本地包都有自己的依赖关系。因此，在每个包的 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上提出了同样的问题，但没有看到太多的兴趣，所以我们来到了这里。如果列表更新，我一定会更新我的问题。

4

1 回答 1

2

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

我使用模块来提供这样的结构。每个模块定义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);
  }
);

简化后的项目结构如下：

简化项目
├── 资产
│ ├── css
│ │ ├── main.css
│ ... ...
│ └── img
│ └── noImage.jpg
├── 组件
│ ├── Application.js
│ ├── 公地
| | ...
│ │ └── 实用工具
│ │ └── AMD.js
│ ├── 库
│ │ ├── jQuery
│ │ │ └── jquery.min.js
│ │ ├── RequireJS
│ │ │ ├── 插件
│ │ │ │ ├── json.js
│ │ │ │ └── text.js
│ │ ... └── require.js
│ ├── 型号
│ │ └── 产品
│ │ ├── AMD.js
│ │ └── Model.js
│ ├── 控制器
| | ...
│ └── 浏览量
│ ├── 主要
│ │ ├── AMD.js
│ │ ├── main.css
│ │ ├── main.html
│ │ └── main.js
│ ...
│ └── ProductsTile
│ ├── AMD.js
│ ├── main.css
│ ├── main.html
│ └── main.js
├── favicon.ico
└── index.html

你可以在这里找到整个未完成的项目。

自您发布问题以来已经三个月了，我很想知道您是如何解决的。请告诉我。

于 2013-06-03T06:01:09.857 回答