10

クライアント側のJavaScriptバージョンのLESSを使用してコンパイルするコードを減らし、最終的なライブサイトでもこれを使用し続けたいと考えています（私は知っています...悪い形式ですが、ユーザーができるようにする機能を提供しますいくつかの少ない変数をカスタマイズし、その「テーマ」をその場でアプリ全体に持たせます。これは、一度ロードされると更新されないWebアプリであるため、少ないものをコンパイルするための追加のロード時間は許容できると思います）。

また、requireJSを使用しています。

質問は：

A）requireJSにロードするコードを少なくするにはどうすればよいですか？

B）コンパイルが完了したときにイベントをディスパッチすることが少なくなりますか？と

C）コマンドで再コンパイルするために少ないトリガーを実行する方法はありますか？

ありがとう。

4

3 に答える 3

14

RequireJS のテキスト ローダー プラグインを使用して .less ファイルをテキストとして読み込み、新しい less.Parser インスタンスを作成してテキストを解析し、スタイル テキストを自分で追加しました。

(new less.Parser()).parse(lessText, function (err, css) {
  if (err) {
    if (typeof console !== 'undefined' && console.error) {
      console.error(err);
    }
  } else {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = css.toCSS();
  }
});

同様のアプローチを取ることもできますが、スタイル ノードに ID を与え、その ID を削除してから、必要に応じて再解析された別の LESS テキストを追加し直します。

注意: テキスト プラグインは、テキスト ファイルが Web ページと同じドメインにある場合にのみ、オンデマンドでテキスト ファイルを読み込むことができます。RequireJS オプティマイザーを使用すると、テキストをインライン化して、ビルド済みの最適化された JS ファイルにすることができます。

于 2011-05-23T04:14:40.220 に答える
10

@jrburke：あなたのコードに基づいて簡単なrequirejsプラグインをまとめました：

define({

    version: '0.1',

    load: function(name, req, onLoad, config) {

        req(['text!' + name, 'base/less'], function(lessText) {

            var styleElem;

            (new less.Parser()).parse(lessText, function (err, css) {
                if (err) {
                    if (typeof console !== 'undefined' && console.error) {
                        console.error(err);
                    }
                } else {
                    styleElem = document.createElement('style');
                    styleElem.type = 'text/css';

                    if (styleElem.styleSheet) 
                        styleElem.styleSheet.cssText = css.toCSS();
                    else 
                        styleElem.appendChild( document.createTextNode( css.toCSS() ) );

                    document.getElementsByTagName("head")[0].appendChild( styleElem );
                }

                onLoad(styleElem);
            });

        });     
    }

});

「base/less」はより少ないソースを指します。これを事前にロードして、グローバルlessオブジェクトが存在すると想定することもできます。理想的には、より少ないパーサーオブジェクトをこのプラグイン自体にプルして、グローバルをまったく作成しないようにします。

これを使用して、次のようなことができます。

require(['less!global.less'], function(elem) {

});

その時点で、global.lessが解析されてページに追加され、何らかの理由でスタイル要素を削除または変更する必要がある場合に備えて、スタイル要素を指すelemが返されます。

誰かが何か入力を持っているか、これを行うためのより良い方法を知っていますか？

乾杯

于 2011-11-20T01:30:00.243 に答える
3

インポートで @nicholas プラグインに問題がありました。ファイルのパスを検索パスに追加して修正し、ファイル名を設定してエラーメッセージを改善しました。

// http://stackoverflow.com/questions/5889901/requirejs-and-less
// enables require(['share/less!whatever.less'], function(elem) {});
define({
    version: '0.1',
    load: function(name, req, onLoad, config) {
        req(['share/text!' + name, 'share/less-1.3.0'], function(lessText) {
            var styleElem;
            var parser = new(less.Parser)({
                filename: name,
                paths: [name.split('/').slice(0,-1).join('/') + '/'],
            });
            parser.parse(lessText, function (err, css) {
                if (err) {
                    if (typeof console !== 'undefined' && console.error) {
                        console.error(err);
                    }
                } else {
                    styleElem = document.createElement('style');
                    styleElem.type = 'text/css';

                    if (styleElem.styleSheet)
                        styleElem.styleSheet.cssText = css.toCSS();
                    else
                        styleElem.appendChild( document.createTextNode( css.toCSS() ) );

                    document.getElementsByTagName("head")[0].appendChild( styleElem );
                }
                onLoad(styleElem);
            });
        });
    }
});
于 2012-08-09T19:37:10.223 に答える