requireJS和LESS

Question

我正在使用LESS的客戶端javascript版本編譯出更少的代碼，並且希望在最終的活動網站上繼續使用它（我知道...不好的形式，但它使我允許用戶自定義少量變量並在運行中讓他們的整個應用程序具有該「主題」的能力，因爲它是一個曾經加載過的未曾刷新的web應用程序，我想額外的第二次加載時間來編譯更少的是上可接受的）。

我也在使用requireJS。

的問題是：

A）我怎麼requireJS加載更少的代碼？

B）編譯完成後是否少派遣任何事件？和

C）有沒有辦法觸發較少的命令重新編譯？

謝謝。

Answer 1

我已經使用了text loader plugin的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文本。

需要注意的是，文本插件只能在文本文件與網頁位於同一個域時按需加載文本文件。如果使用RequireJS優化器，則可以將文本內聯到一個構建的優化JS文件中。

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

     });  
    } 

}); 

「基地/少」點少源。您也可以提前加載，並假定存在全局的less對象。理想情況下，我想將更少的Parser對象插入到此插件中，因此它根本不會創建全局。

使用這個就像我可以做的東西：

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

}); 

在這一點，global.less已經被解析並添加到頁面，並還給ELEM指向樣式元素的情況下，我需要刪除或出於某種原因修改它。

有沒有人有任何輸入或知道這樣做的更好方法？

乾杯

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