RequireJS: Загрузка модуляў, уключаючы шаблоны і CSS

Пасля таго, як гуляць з AMD/RequireJS мне было цікава, калі гэта добрая ідэя, каб загрузіць модулі карыстацкага інтэрфейсу, уключаючы шаблоны і CSS, каб яны цалкам незалежныя ад вэб-старонкі.

Гэта гучыць, як добра, але я не бачыў гэта рэалізавана ў дзікай прыродзе, так што могуць быць падводныя камяні.

Падумайце пра нейкі модулі карыстацкага інтэрфейсу з наступнага структурай:

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 частка тут, скажам, CONCAT/Мінімізаваць табліцы стыляў, як гэта робіць з часткамі JS?
  4. Любыя думкі на гэты конт? Добра ці дрэнна?
69
я раблю гэта для шаблонаў, і гэта працуе выдатна. Адзіная барацьба ў мяне было з CSS, дзе я не мог атрымаць аптымізацыю працы. Гэта дало б мне загадкавую памылку, і ў мяне не было часу, каб вырашыць гэтую праблему. Гэта ў цяперашні час у маім спісе рэчаў, каб паспрабаваць вырашыць, так што я буду трымаць вачэй на ваша пытанне, каб убачыць, калі хтосьці мае дазвол
дададзена аўтар timDunham, крыніца

2 адказы

Вы можаце паказаць шаблон, як залежнасць, выкарыстоўваючы тэкст! Модуль, як вы паказалі. Я раблю гэта з Вусы шаблонаў.

Аднак Require.js не падтрымлівае відавочна CSS файлы.

Here is the official explanation, it's explained pretty well: http://requirejs.org/docs/faq-advanced.html#css

Змяніць: лютага 2012.

Templates such as handlebars can also be precompiled and included just like any other JS module http://handlebarsjs.com/precompilation.html

Змяніць: жнівень 2015

Калі вы пасля гэтага роду модульнасці вы павінны паглядзець у WebPack і, у прыватнасці CSS-пагрузчык . Я выкарыстоўваю яго на пару .css файлаў з .jsx файламі як адзіны «модуль» і атрымаць адпаведны CSS у адну табліцу стыляў падчас зборкі.

50
дададзена
Што такое «правільны» спосаб мець справу з CSS тады?
дададзена аўтар hugomg, крыніца
Так, я ведаю, што ёсць шмат альтэрнатыў, гэта яшчэ свайго роду бамжы мяне, што мы маем стандартную сістэму для модуляў JS, але калі справа даходзіць да CSS мы вярнуліся да дзікага захаду.
дададзена аўтар hugomg, крыніца
Я мяркую, што я не разумею, чаму CSS не можа быць загружаны тэкст! убудова? ня CSS проста utf8 тэкст?
дададзена аўтар Alexander Mills, крыніца
AFAIK няма «правільнага» шляху. вашыя варыянты: 1) традыцыйная спасылка тэг 2) дынамічна уключаючы табліцы стыляў з дапамогай JavaScript. Калі Javascript залежыць ад вашага CSS, і вы хочаце, каб дынамічна загружаць яго вам прыйдзецца стварыць функцыю для праверкі існавання атрыбуту з загружанага класа CSS перад вашым яваскриптом прабегаў фішкі.
дададзена аўтар Chris Biscardi, крыніца
Вы можаце таксама загрузіць CSS з дапамогай тэксту! модуль і разабраць яго, хоць я ніколі не рабіў гэтага.
дададзена аўтар Chris Biscardi, крыніца
Вы можаце выкарыстоўваць yesnope.js для загрузкі CSS файлаў з дапамогай функцыі injectCSS
дададзена аўтар Saleh, крыніца

Існуе трэці бок CSS убудова для RequireJS, які, здаецца, працуе добра: https://github.com/VIISON/ RequireCSS/.

6
дададзена
лепш выкарыстаць гэты, які падтрымлівае r.js аптымізатар github.com/guybedford/require-css/ пытанні
дададзена аўтар Offirmo, крыніца
Хоць убудова вельмі стары, ён выдатна працуе яшчэ ў 2015 годзе.
дададзена аўтар budhajeewa, крыніца