Dopo aver esaminato l'implementazione dei file creati per la mia app ho scoperto perché questo funziona.
HTML
file vengono letti dal file system e il loro contenuto aggiunto all'oggetto Modello globale, per esempio,
== myapp.html ==
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
risultati nel seguente codice JS:
Template.body.addContent((function() {
var view = this;
return [
HTML.Raw("<h1>Welcome to Meteor!</h1>\n\n "),
Spacebars.include(view.lookupTemplate("hello"))
];
}));
che è avvolto in una funzione con il nome del file in quanto è fondamentale:
"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.")
];
}));
},
Quindi tutto il nostro HTML è ora puro codice JS che verrà incluso utilizzando require come qualsiasi altro modulo.
CSS
I file vengono anche letti dal file system e il loro contenuto sono integrati anche nelle funzioni JS, per esempio
== myapp.css ==
/* CSS declarations go here */
body {
background-color: lightblue;
}
si trasforma in:
"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");
}]
Quindi tutto il nostro CSS è ora anche un modulo di JS che è ancora una volta importati in seguito utilizzando require.
Conclusione
Tutti i file sono in un modo o nell'altro convertiti in moduli JS che seguono regole simili per l'inclusione come moduli AMD/CommonJS. Verranno inclusi/raggruppati se un altro modulo fa riferimento ad essi. E dal momento che tutti sono trasformati in codice JS non c'è nessuna magia dietro la sintassi ingannevole:
import '../imports/hello/myapp.html';
import '../imports/hello/myapp.css';
Entrambi sono transpiled alle loro forme equivalenti con require una volta che i beni sono stati trasformati ai moduli JS.
Considerando che l'approccio di collocazione delle risorse statiche nella directory imports non è menzionato nella documentazione ufficiale, , questo metodo di importazione delle risorse statiche funziona.
Questo sembra essere al centro di come funziona Meteor, quindi scommetto che questa funzionalità sarà lì per un lungo periodo.
Non so se chiamare questa funzione, forse una descrizione più appropriata è una conseguenza inaspettata ma che sarebbe solo dal punto di vista dell'utente, presumo che le persone che hanno scritto il codice abbiano capito che ciò sarebbe accaduto e forse anche progettato appositamente in questo modo.
Perché stai importando CSS e HTML in file JavaScript? Non hai bisogno di farlo in Meteor. –
Certo, ci sono altri modi per ottenere lo stesso. La domanda rimane, è un bug o una funzionalità? –
Dove sei, Meteor community? Vieni e prendi questa taglia per favore !!! –