RequireJS и LESS

Я использую javascript-версию на стороне клиента LESS для компиляции меньшего количества кода и хотел бы продолжать использовать это даже на последнем живом сайте (я знаю... плохую форму, но это дает мне возможность позволяют пользователям настраивать несколько меньших переменных и иметь "тему" всего своего приложения "на лету", поскольку, как только webapp, который когда-то загружался, никогда не обновляется, я думаю, что дополнительная секунда времени загрузки для компиляции менее приемлема).

Я также использую requireJS.

Возникает вопрос:

A) Как мне получить requireJS для загрузки меньшего кода?

B) Уменьшает ли отправка каких-либо событий, когда компиляция завершена? и

C) Есть ли способ вызвать меньше повторной компиляции по команде?

Спасибо.

Ответы

Ответ 1

Я использовал плагин для загрузчика текста для 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();
  }
});

Вы можете использовать аналогичный подход, но приведите стиль node идентификатор и удалите этот идентификатор, а затем добавьте обратно другой повторно обработанный текст LESS по желанию.

Предостережение: текстовый плагин может загружать только текстовые файлы по запросу, когда текстовый файл находится в том же домене, что и веб-страница. Если вы используете оптимизатор RequireJS, вы можете встроить текст в построенный, оптимизированный JS файл.

Ответ 2

@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. В идеале, я бы хотел привлечь меньше объекта Parser в этот плагин, поэтому он вообще не создает глобального.

Используя это, я могу делать такие вещи, как:

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

});

В этот момент global.less был проанализирован и добавлен на страницу и возвращает элемент elem, указывающий на элемент стиля, в случае необходимости удалить или изменить его по какой-либо причине.

Кто-нибудь есть какой-либо вклад или знает лучший способ сделать это?

Приветствия

Ответ 3

У меня возникли проблемы с плагином @nicholas с импортом. Я исправил его, добавив путь к файлу в путь поиска и установив имя файла для получения более эффективных сообщений об ошибке:

// http://stackoverflow.com/info/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);
            });
        });
    }
});