4

パッケージを必要とする 1 つのメイン モジュールで構成されるアプリ レイアウトを作成したいと考えています。各パッケージ (メイン モジュールを含む) には、サード パーティのライブラリや他のローカル パッケージへの独自の依存関係があります。したがって、各パッケージの 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 ) にまとめました。

最後に、require メーリング リスト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
│ ...
│ └── 商品タイル
│ ├── AMD.js
│ ├── main.css
│ ├── main.html
│ └── main.js
├── favicon.ico
└──index.html

ここで未完成のプロジェクト全体を見つけることができます。

あなたが質問を投稿してから 3 か月が経ちましたが、どのように解決したか知りたいと思っています。私にお知らせください。

于 2013-06-03T06:01:09.857 に答える