richiedejs e meno

Question

Sto usando la versione JavaScript sul lato client di meno per compilare meno codice e vorrei continuare a usarlo anche sul sito in diretta finale (lo so ... cattiva forma, ma mi dà la possibilità di consentire agli utenti di farlo Personalizza alcune variabili in meno e disporre di quel "tema" tutta la loro app al volo, visto che è un WebApp che una volta caricato non si aggiorna mai, sto pensando che il secondo tempo di carico aggiuntivo per compilare meno è accettabile).

Sto anche usando Requisitejs.

La domanda è:

A) Come posso ottenere requisiti per caricare meno codice?

B) meno invio eventi quando la compilation è completa? e

C) C'è un modo per innescare meno per ricomporre il comando?

Grazie.

Answer 1

Ho usato il plug -in del caricatore di testo Perché Recoverjs carichi il file .less come testo, quindi crea una nuova istanza di meno.

(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();
  }
});

Potresti adottare un approccio simile, ma dare al nodo di stile un ID e rimuovere quell'ID e quindi aggiungere un altro testo per ripartire quando si desidera su richiesta.

Un avvertimento: il plug -in di testo può caricare file di testo su richiesta solo quando il file di testo si trova sullo stesso dominio della pagina Web. Se si utilizza l'ottimizzatore Requisitejs, è possibile in linea il testo in un file JS incorporato e ottimizzato.

Answer 2

@jrburke: ho messo insieme un plug -in Requisito rapido in base al tuo codice:

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" indica la meno fonte. Potresti anche caricarlo in anticipo e assumere il globale less Esiste l'oggetto. Idealmente, mi piacerebbe attirare l'oggetto meno parser in questo plugin stesso in modo che non crei affatto un globale.

Usando questo posso fare cose come:

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

});

A quel punto, Global.less è stato analizzato e aggiunto alla pagina e restituisce Elem che indica l'elemento di stile nel caso in cui ho bisogno di rimuoverlo o modificarlo per qualche motivo.

Qualcuno ha qualche input o sa un modo migliore per farlo?

Saluti

Answer 3

Avevo problemi con il plug -in @Nicholas con le importazioni. L'ho risolto aggiungendo il percorso del file al percorso di ricerca e impostare il nome file per migliori messaggi di errore:

// 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);
            });
        });
    }
});