web-dev-qa-db-ja.com

RequireJS：テンプレートおよびCSSを含むモジュールのロード

AMD/RequireJSをいじくり回した後、テンプレートやCSSを含むUIモジュールをロードして、Webページから完全に独立させることをお勧めします。

良さそうに聞こえますが、これが実際に実装されているのを見ていないので、落とし穴があるかもしれません。

次の構造を持ついくつかのUIモジュールを考えてください。

myWidget
    |--img 
    |--main.js
    |--styles.css
    +--template.tpl

1つのフォルダー内のすべてのもの。とても素敵に見えます。

Main.jsのモジュールは次のようになります。

define(["TemplateEngine", "text!myWidget/template.tpl"], function(TemplateEngine, template) {

    // Load CSS (Pseudo Code)
    var cssUrl = "myWidget/styles.css";
    appendToHead(cssUrl);

    return function() {
        return {
            render: function(data) {
                  return TemplateEngine.toHtml(template, data);
            } 
        }
    }
});

質問は次のとおりです。

  1. 何か不足していますか？
  2. 「標準」の方法でこれを達成するためのプラグイン/コンセプトはありますか？
  3. RequireJSオプティマイザーは、CSSパーツをここで処理できますか（JSパーツのようにスタイルシートを連結/縮小するなど）。
  4. それについて何か意見はありますか？良いまたは悪い？
cssrequirejsjavascriptjs-amd
72
fbrandel

テキストを使用して、テンプレートを依存関係として指定できます！あなたが示したようなモジュール。これをMustache Templatesで行います。

ただし、Require.jsはcssファイルを明示的にサポートしていません。

ここに公式の説明があり、かなりよく説明されています： http://requirejs.org/docs/faq-advanced.html#css

編集：2012年2月。

ハンドルバーなどのテンプレートも、他のJSモジュールと同様にプリコンパイルして含めることができます http://handlebarsjs.com/precompilation.html

編集：2015年8月

この種のモジュール化を行っている場合は、 webpack 、特に css-loader を調べる必要があります。これを使用して、.cssファイルと.jsxファイルを統一された「モジュール」としてペアリングし、ビルド時に関連するCSSを単一のスタイルシートに抽出します。

52
Chris Biscardi

RequireJS用のサードパーティのCSSプラグインがあり、これはうまく機能しているようです： https://github.com/VIISON/RequireCSS/ 。

7
Chad Johnson