requireJS和LESS

Question

我正在使用LESS的客户端javascript版本来编译更少的代码,并希望在最终的实时网站上继续使用它(我知道...糟糕的形式,但它让我能够允许用户自少一些变量,有"主旋律"他们在飞行中整个应用程序,看到它,一旦加载从来没有刷新,我想的加载时间附加的第二编译少是可以接受的)web应用程序.

我也在使用requireJS.

问题是:

A)如何让requireJS加载更少的代码？

B)编译完成后,是否会减少发送任何事件？和

C)有没有办法触发更少的命令重新编译？

谢谢.

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

您可以采用类似的方法,但为样式节点提供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);
            });

        });     
    }

});

"base/less"指向较少的来源.您也可以提前加载它,并假设全局less对象存在.理想情况下,我想将较少的Parser对象拉入此插件本身,因此它根本不会创建全局.

使用这个我可以做的事情:

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

});

此时,global.less已被解析并添加到页面中,并返回elem指向样式元素,以防我出于某种原因需要删除或修改它.

有没有人有任何意见或知道更好的方法吗？

干杯