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. それに関する意見はありますか?良いか悪い?
69
私はテンプレートのためにこれをやっているし、それは素晴らしい仕事です。私が抱いていた唯一の闘いは、最適化がうまくいかないCSSでのことでした。それは私に謎めいたエラーを与え、私はそれを解決する時間がなかった。現在解決しようとしていることが一覧に表示されていますので、あなたの質問に目を留めて、解決策があるかどうかを確認します
追加された 著者 timDunham,

2 答え

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

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

Here is the official explanation, it's explained pretty well: http://requirejs.org/docs/faq-advanced.html#css

編集:2012年2月

Templates such as handlebars can also be precompiled and included just like any other JS module http://handlebarsjs.com/precompilation.html

編集:2015年8月

この種のモジュール化の後であれば、ウェブパック、特に css-loader にアクセスしてください。私は.cssファイルと.jsxファイルを統一された "モジュール"として組み合わせ、ビルド時に関連するCSSを単一のスタイルシートに抽出します。

50
追加された
それでは、CSSを扱う "正しい"方法は何ですか?
追加された 著者 hugomg,
ええ、私は多くの選択肢があることを知っています。それでも私はJSモジュールのための標準的なシステムを持っていると私はちょっと気になりませんが、CSSに関しては私たちは野生の西に戻っています。
追加された 著者 hugomg,
CSSでテキストを読み込めない理由を理解できないと思います!プラグイン? CSSだけのutf8テキストではありませんか?
追加された 著者 Alexander Mills,
AFAIKには「正しい」方法はありません。あなたのオプションは次のとおりです:1)従来のリンクタグ2)javascriptを使用してスタイルシートを動的に含めます。あなたのJavaScriptがあなたのcssに依存していて、それを動的にロードしたい場合は、javascriptウィジェットが実行される前にロードされたcssクラスからの属性の存在をテストする関数を作成する必要があります。
追加された 著者 Chris Biscardi,
テキストを使ってCSSを読み込むこともできます!私は決してこれをしていませんが、モジュールを解析してください。
追加された 著者 Chris Biscardi,
yesnope.jsを使用すると、injectCSS関数を使用してcssファイルを読み込むことができます
追加された 著者 Saleh,

RequireJSのサードパーティのCSSプラグインがうまくいくようです: https://github.com/VIISON/ RequireCSS/

6
追加された
r.jsオプティマイザをサポートしているこの方が良いです。 github.com/guybedford/require-css/問題
追加された 著者 Offirmo,
プラグインは非常に古いですが、2015年にはまだ正常に動作します。
追加された 著者 budhajeewa,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript