RequireJS : 템플릿 및 CSS를 포함한 모듈로드

RequireJS : 템플릿 및 CSS를 포함한 모듈로드

---

AMD / RequireJS를 가지고 놀아 본 후에는 템플릿과 CSS를 포함한 UI 모듈을로드하여 웹 페이지와 완전히 독립적 인 것이 좋은지 궁금했습니다.

좋은 것처럼 들리지만 이것이 실제로 구현되는 것을 보지 못했기 때문에 함정이있을 수 있습니다.

다음 구조의 일부 UI 모듈을 생각해보십시오.

myWidget
    |--img 
    |--main.js
    |--styles.css
    +--template.tpl

하나의 폴더에있는 모든 항목. 아주 좋아 보인다.

main.js의 모듈은 다음과 같습니다.

define(["TemplateEngine", "text!myWidget/template.tpl"], function(TemplateEngine, template) {

    // Load CSS (Pseudo Code)
    var cssUrl = "myWidget/styles.css";
    appendToHead(cssUrl);

    return function() {
        return {
            render: function(data) {
                  return TemplateEngine.toHtml(template, data);
            } 
        }
    }
});

이제 질문은 다음과 같습니다.

1. 내가 뭔가를 놓치고 있습니까?
2. "표준"방식으로이를 달성하는 방법에 대한 플러그인 / 개념이 있습니까?
3. RequireJS 옵티마이 저가 여기 CSS 부분을 처리 할 수 ​​있습니까? 예를 들어 JS 부분과 마찬가지로 스타일 시트를 연결 / 축소 할 수 있습니까?
4. 그것에 대한 의견이 있습니까? 좋거나 나쁘거나?

---

텍스트를 사용하여 템플릿을 종속성으로 지정할 수 있습니다! 당신이 보여준 것과 같은 모듈. Mustache 템플릿으로이 작업을 수행합니다.

그러나 Require.js는 명시 적으로 css 파일을 지원하지 않습니다.

공식적인 설명은 다음과 같습니다. http://requirejs.org/docs/faq-advanced.html#css

편집 : 2012 년 2 월.

핸들 바와 같은 템플릿은 다른 JS 모듈 http://handlebarsjs.com/precompilation.html 처럼 미리 컴파일하고 포함 할 수도 있습니다 .

편집 : 2015 년 8 월

이런 종류의 모듈화를 원한다면 webpack , 특히 css-loader를 살펴 봐야 합니다. .css 파일을 .jsx 파일과 통합 된 "모듈"로 쌍으로 연결하고 빌드시 관련 CSS를 단일 스타일 시트로 추출하는 데 사용하고 있습니다.

---

잘 작동하는 RequireJS 용 타사 CSS 플러그인이 있습니다 : https://github.com/VIISON/RequireCSS/ .

참고 URL : https://stackoverflow.com/questions/7917639/requirejs-loading-modules-include-templates-and-css