Less.js: 동기화 및 비동기 가져오기를 트리거하는 방법

isSync는 렌더링할 옵션 개체에 전달할 수 있습니다. data-uri는 항상
함수는 비동기식일 수 없기 때문에 동기화합니다.

그러나 importManager 는 getFileManager 옵션을 전달 하지 않습니다 ...

여기에서 완료

https://github.com/less/less.js/blob/32dbbee247f76af00eb7577053eccad2ee5f6110/lib/less-browser/file-manager.js#L61

그 옵션은 더 적은 코어에서 무시되고 브라우저에만 적용되기 때문입니다. 따라서 브라우저는 항상 비동기라고 하며 옵션에 따라 동기화 또는 비동기 메커니즘을 사용하여 파일을 가져올 수 있습니다.

얼마나 혼란스러운지 알 수 있습니다. 문제를 일으키는가?

내가 즉시 보는 한 가지는 페이지 로드 시 옵션에 의해서만 영향을 받으므로 나중에 설정되거나 옵션으로 전달되면 무시됩니다.

글쎄, 아마도 내 사용 사례를 설명해야 할 것입니다.

webpack 에 대해 덜 로더 를 작성했습니다 . webpack에는 자체 해결 메커니즘이 있기 때문에 플러그인을 사용하여 파일 관리자를 통해 더 적은 파일에 연결하고 있습니다.

Webpack은 동기화 및 비동기 로더를 지원하지만 모든 파일을 동기화 또는 비동기적으로 렌더링하도록 덜 지시하는 방법을 찾지 못했습니다. 현재 항상 loadFile 호출합니다. 따라서 동기 컴파일이 요청될 때 loadFileSync 를 호출하기 위해 더티 핵 을 사용했습니다. 운 좋게도 콜백이 동기식으로 호출될 때 동기식으로 덜 작동합니다(물론 정상적인 상황에서는 수행되지 않아야 함).

알 겠어요...

비동기 옵션을 더 적은 컨텍스트로 이동한 다음 이를 사용하여 제안한 대로 어떤 호출을 수행할지 결정해야 한다고 생각합니다. 브라우저 파일 관리자에 약간의 변경이 필요할 수 있지만 좋은 리팩터가 될 것이라고 생각합니다.

멋있는!

단 하나의 문제가 있습니다. callback 를 수락하면서 동기적으로 무언가를 하는 것은 매우 이례적인 일입니다( render -function이 하는 것처럼). 다음과 같은 sync -옵션을 제안하고 있습니다.

less.render(
    input,
    { ... sync: true ... },
    function (err, result) {
    }
);

?

Imho 콜백이 동기적으로 호출되는 것이 이상합니다. 다음과 같은 API를 기대합니다.

// async
less.render(input, option, callback);

// sync
var result = less.renderSync(input, option);

네 맞습니다. 그게 더 좋습니다.

+1
콜백에서만 코드 실행을 제한하지 않도록 renderSync 구현을 고려하는 것도 매우 유용한 것 같습니다. 콜백 범위에서 console.err 또는 throw new Error() 또는 의도적인 JavaScript 오류와 같은 많은 메서드는 콘솔에 아무 것도 인쇄하지 않고 코드 실행만 중지하여 잠재적으로 추적할 수 없는 버그로 이어질 수 있습니다. 나는이 행동이 일어나서는 안된다고 상상할 것입니다.

내 특별한 경우 renderSync 명령줄 유틸리티에서 사용되며 매번 모든 출력과 오류가 순서대로 인쇄되도록 약속을 사용하여 콜백 흐름을 제어하는 ​​대신 renderSync를 사용하고 그것에 대해 걱정하기 위해.

(문제 자체를 비하하는 것이 아니라 문제가 더 이상 이상해지지 않도록 하기 위한 것입니다.)

Imho 콜백이 동기적으로 호출되는 것이 이상합니다.

이것은 과장입니다... 이 코드
콜백은 단지 콜백일 뿐이며 그 자체로는 동기화/비동기와 아무 관련이 없습니다.

좋아요, callback : wink: 라는 용어에 대해 이야기할 필요가 있습니다

일부는 forEach a callback ( MDN 등 )에 전달된 함수를 호출합니다. 나에게 콜백은 작업이 완료될 때 호출되는 것이기 때문에 그렇게 부르지 않을 것입니다.

그리고 콜백이 노드의 오류 규칙을 따르고 첫 번째 인수가 null 이거나 오류인 경우 비동기식으로 _항상_ 호출할 충분한 이유 가 있습니다.

일부는 forEach 콜백에 전달된 함수를 호출합니다.

누군가가 node 를 너무 많이 사용하고 있습니다 ;) 모두가 이것을 "콜백"이라고 부릅니다. 따라서 "작업이 완료되었을 때 호출되는 콜백 함수"에 관한 것이라면 "비동기 콜백"에 지나지 않습니다.

하지만 신경쓰지 마세요. 죄송합니다. 저는 CO처럼 들리고 이 순전히 언어적 토론을 시작하려는 의도가 아니었습니다(단지 우리가 동일한 언어를 말하고 문서에서 실제로 less.render 가 동기식임을 언급하도록 하고 싶었습니다).

추신 더 명확히하기 위해 :

@kwketh

이 less.render 양식은 몇 년 동안 존재해 왔으며, 수천 개의 스니펫을 깨기 위해 아무 것도 아닌 것으로부터 변경할 수 없습니다.

@seven-phases-max

귀하의 답변에 감사드립니다. 모두 도움이 됩니다. 콜백에 관한 귀하의 모든 의견에 동의합니다. 나는 .render 코드를 아주 간략하게 살펴보았고 당신이 옳았습니다. 작성된 형식은 모두 콜백을 중심으로 돌아가며 renderSync 를 갖는 것이 쉽지도 합리적이지도 않은 것 같습니다.

내 문제는 어떻게 든 다르지만 관련이 있습니다 (https://github.com/less/less.js/issues/2546). renderSync 기능을 구현하면 내 문제가 해결되지만 궁극적인 솔루션은 아닙니다.

빨리 봐주실래요? 정말 감사합니다.

감사 해요.

누군가 너무 많은 노드를 사용하고 있습니다.

그게 사실입니다.

그러나 노드의 콜백 규칙은 잘 정립되어 있습니다. 이 경우 콜백이 항상 비동기식으로 호출된다고 가정합니다.

추가: 오류가 발생했을 때 오류는 어떻게 처리됩니까? (대부분의 동기화 API와 같이) 던져지거나 콜백에 인수로 전달됩니까?

현재 API가 모호하다는 것뿐입니다(적어도 imho).

renderSync 아직 있나요? 그렇지 않은 경우 동기 render 대한 해결 방법이 있습니까?

편집: Nvm. 이것에 걸려 넘어지는 미래의 사람을 위해 이것이 내가 한 일입니다.

less.renderSync = function (input, options) {
    if (!options || typeof options != "object") options = {};
    options.sync = true;
    var css;
    this.render(input, options, function (err, result) {
        if (err) throw err;
        css = result.css;
    });
    return css;
};

이 기능이 실제로 구현됩니까? 문서가 있습니까? async -옵션만 찾을 수 있습니다.

실제로 지원되는지 여부는 알 수 있지만 현재 내가 한 작업이 저에게 효과적이라는 것을 알고 있으므로 .... 어깨를 으쓱합니다.

@Aarilight 대단히 감사합니다, 귀하의 코드는 많은 도움이 되었습니다

이 동기식 콜백 동작은 정말 직관적이지 않습니다.

@Aarilight 그것은 나를 위해 작동하지 않습니다 =(
나는 시도했다

less.render(css, {sync : true}, (e, result) =>{
        if(e) {
         console.error(e)
    }

        output = result;
        return result
    });

https://github.com/less/less.js/blob/master/lib/less/render.js 기록

            console.log('1')
            this.parse(input, options, function(err, root, imports, options) {
                console.log('2')
                if (err) { return callback(err); }

                var result;
                console.log('3')
                try {
                    console.log('4')
                    var parseTree = new ParseTree(root, imports);
                    console.log('5')
                    result = parseTree.toCSS(options);
                }
                catch (err) { 
                    console.log('6')
                    return callback(err); 
                }

                console.log('7')
                callback(null, result);
            });
            console.log('8')

일부 파일에는 1, 8, 2,3,4,5,6,7이 표시됩니다.

-1 렌더를 render 및 renderSync 로 분할합니다. 어색한 Node.js 규칙입니다. 그리고 grunt / gulp / accord 또는 JS 객체를 지정된 기능으로 전달하는 less에 통합된 기타 워크플로에 동기화 옵션을 보내는 것을 허용하지 않습니다. IMO 비동기 옵션을 사용할 때 선택적 콜백을 전달하는 것이 좋습니다.

또 다른 옵션: 라이브러리가 시작하는 것을 본 것은 두 경우 모두 실제로 약속을 반환하는 것입니다. 그런 다음 sync/async 사이에서 변경되는 모든 것은 약속이 이행될 때이지만 결과를 처리하는 코드는 정확히 동일합니다.

그리고 btw.:

{sync: true}

그런 옵션이 없습니다 .

-1 렌더를 render 및 renderSync로 분할합니다. 어색한 Node.js 규칙입니다.

완전 주관적인 생각 아닌가요? 단일 기능에서 비동기와 동기화를 결합하는 IMHO는 (몇몇 예외는 있지만) 끔찍한 안티 패턴입니다. 조건문으로 어수선한 코드를 생성하고, 유지 관리가 더 어렵고, 한 가지를 잘 수행하는 명확하게 정의되고 문서화된 함수보다 사용자에게 훨씬 더 혼란스럽습니다. 그냥 내 2c

완전 주관적인 생각 아닌가요?

예.

그럼에도 불구하고, 나의 다른 요점은 주관적이지 않습니다. 즉, 함수가 분할된 경우 업데이트해야 할 수 있는 빌드 프로세스에서 Less가 사용됩니다. 예를 들어: 현재 한 프로젝트에 사용하고 있는 Accord(https://github.com/jenius/accord)는 여러 컴파일러를 단일 API로 추상화하고 일반적으로 엔진에 필요한 기능에 객체를 전달합니다. 따라서 개발자가 지정하는 Less 옵션을 기반으로 사용되는 기능을 전환하는 것은 큰 문제가 아니지만 영향을 미치는 라이브러리의 수는 확실하지 않습니다. 그것은 단지 알아야 할 사항입니다.

현재로서는 옵션에 syncImport: true 를 추가하면 이 문제가 해결되었습니다.

(문서에는 없습니다... 소스 코드에서 우연히 발견할 수 있을 만큼 운이 좋았습니다.)

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.