Использование ES6 `import` с CSS/HTML файлами в проекте Meteor: ошибка или функция?

В настоящее время я изучаю Метеор, и я узнал что-то, что заинтриговало меня.

Я могу загрузить элементы HTML и CSS из JS файла с помощью инструкции import.

Это было для меня неожиданностью, поэтому я побежал в google, но не смог найти это поведение, задокументированное в спецификации ES6 import или в Meteor Docs.

Ответы

Ответ 1

После выполнения встроенных файлов для моего приложения Я узнал, почему это работает.

HTML

Файлы считываются из файловой системы и их содержимое добавляется к глобальному объекту Template, например,

== myapp.html ==

<body>
  <h1>Welcome to Meteor!</h1>
  {{> hello}}
</body>

приводит к следующему JS-коду:

Template.body.addContent((function () {                                                                       
  var view = this;                                                                                          
  return [
     HTML.Raw("<h1>Welcome to Meteor!</h1>\n\n  "),      
     Spacebars.include(view.lookupTemplate("hello"))
  ];
}));

который завернут в функцию с именем файла в качестве ключа:

"myapp.html": function (require, exports, module) {

     Template.body.addContent((function () {                                                                       
          var view = this;                                                                                          
          return [
             HTML.Raw("<h1>Welcome to Meteor!</h1>\n\n  "),   
             Spacebars.include(view.lookupTemplate("hello"))]; 
     })); 

     Meteor.startup(Template.body.renderToDocument);                                                              

     Template.__checkName("hello");                                                                               
     Template["hello"] = new Template("Template.hello", (
         function () {                                            
           var view = this;                                                                                         
           return [
               HTML.Raw("<button>Click Me</button>\n  "), 
               HTML.P("You've pressed the button ", 
                      Blaze.View("lookup:counter", 
                      function () {
                        return Spacebars.mustache(view.lookup("counter"));                                                   
                      }), " times.")
          ];                                                                                         
     }));                                                                                                         

},

Таким образом, весь наш HTML теперь является чистым JS-кодом, который будет включен с помощью require, как и любой другой модуль.

CSS

Файлы также считываются из файловой системы, и их содержимое также встроено в функции JS, например.

== myapp.css ==

/* CSS declarations go here */

body {
    background-color: lightblue;
}

Получено преобразование в:

"myapp.css": ["meteor/modules", function (require, exports, module) {
    module.exports = require("meteor/modules").addStyles("/* CSS declarations go here */\n\nbody {\n    background-color: lightblue;\n}\n");

}]

Таким образом, все наши CSS также являются JS-модулем, который снова импортируется позже, используя require.

Заключение

Все файлы так или иначе преобразуются в модули JS, которые следуют аналогичным правилам для включения в модули AMD/CommonJS. Они будут включены/включены, если к ним относится другой модуль. И поскольку все они преобразуются в JS-код там нет волшебства за обманчивым синтаксисом:

import '../imports/hello/myapp.html';
import '../imports/hello/myapp.css';

Оба они передаются в их эквивалентные формы с помощью require после преобразования активов в JS-модули.

В то время как подход размещения статических активов в каталоге imports не упоминается в официальной документации, этот способ импорта статических активов работает.

Это, похоже, лежит в основе того, как работает Meteor, поэтому я бы поставил на то, что эта функция будет долгое время.

Я не знаю, можно ли назвать эту функцию более подходящим описанием, это неожиданное следствие, но это только быть правдой с точки зрения пользователя, я предполагаю, что люди, которые написали код, поняли, что это произойдет и, возможно, даже спроектировал его специально таким образом.

Ответ 2

Одна из особенностей Meteor 1.3 - ленивая загрузка, где вы размещаете файлы в папке /imports и не будете оцениваться с нетерпением.

Цитата из руководства Метеор:

Чтобы полностью использовать систему модулей и убедиться, что наш код работает только тогда, когда мы просим об этом, мы рекомендуем, чтобы весь ваш код приложения был помещается внутри каталога import/. Это означает, что Meteor build система будет только связывать и включать этот файл, если на него ссылаются другой файл с использованием импорта.

Таким образом, вы можете ленить загружать свои файлы css, импортируя их из папки /imports. Я бы сказал, что это особенность.

Ответ 3

Экспорт и импорт ES6 функционально доступны в Meteor 1.3. Вы не должны импортировать файлы HTML и CSS, если используете Blaze, текущую настройку шаблона по умолчанию. Функциональность импорта/экспорта есть, но вы можете использовать неправильный подход для создания своих представлений.