10

我正在使用 LESS 的客户端 javascript 版本来编译出更少的代码，并且希望即使在最终的实时站点上也能继续使用它（我知道......糟糕的形式，但它让我能够允许用户自定义一些较少的变量，并在整个应用程序中动态设置“主题”，因为它是一个一旦加载就不会刷新的 web 应用程序，我认为额外的加载时间来编译 less 是可以接受的）。

我也在使用requireJS。

问题是：

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

B) 编译完成后是否会调度任何事件？和

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

谢谢。

4

3 回答 3

14

我已经使用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 文件中。

于 2011-05-23T04:14:40.220 回答
10

@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对象存在。理想情况下，我想将 less Parser 对象拉入这个插件本身，这样它就不会创建一个全局对象。

使用它，我可以执行以下操作：

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

});

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

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

干杯

于 2011-11-20T01:30:00.243 回答
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);
            });
        });
    }
});
于 2012-08-09T19:37:10.223 回答