требуют JS и МЕНЬШЕ - PullRequest
Новая
       2

требуют JS и МЕНЬШЕ

10 голосов
/ 05 мая 2011

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

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

Вопрос:

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

B) Менее ли отправляет какие-либо события после завершения компиляции? и

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

Спасибо.

Ответы [ 3 ]

14 голосов
/ 23 мая 2011

Я использовал плагин text loader для 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();
  }
});

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

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

10 голосов
/ 20 ноября 2011

@ 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 был проанализирован и добавлен на страницу и возвращает элемент, указывающий на элемент стиля в случае, если янужно удалить или изменить его по какой-то причине.

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

Приветствия

3 голосов
/ 09 августа 2012

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

// /7977463/trebuyt-js-i-menshe
// 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);
            });
        });
    }
});
...