2016-03-19 10 views
15

私は現在流星を学んでいて、私に興味をそそるものを見つけました。MeteorプロジェクトのCSS/HTMLファイルでES6 `import`を使う:バグや機能?

import文を使用してJSファイルからHTMLとCSSアセットを読み込むことができます。

import '../imports/hello/myapp.html'; 
import '../imports/hello/myapp.css'; 
import * as myApp from '../imports/hello/myapp.js'; 

これは私には驚きだったので、私はGoogleに走ったが、ES6 importの仕様や流星のドキュメントに記載さ、この動作を見つけることができませんでした。

だから私の質問は以下のとおりです。

  • は、私は自分のアプリケーションを構築するために、この動作に依存することはできますか?
  • Meteorが問題を解決するときに私のアプリが壊れますか(バグの場合)?

ノート私は流星V1.3を使用しています

  • を、これは以前のバージョンでも動作するかどうかわかりません。
  • あなたはGithub
+2

CSSとHTMLをJavaScriptファイルにインポートする理由は何ですか?あなたは流星でこれを行う必要はありません。 –

+0

許可されても、それを達成する他の方法があります。問題は残っていますか、バグか機能ですか? –

+0

あなたはMeteorコミュニティですか?是非、この恩恵を忘れないでください!!! –

答えて

13

私のアプリケーションのビルドファイルの実装を行った後、 私はこの動作がわかりました。

HTML

ファイルのファイルシステムから読み込まれ、その内容は、例えば、グローバルテンプレートオブジェクトに追加されます次のJSコードで

== myapp.html == 

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

結果:だから

"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のすべてを:それはキーだとファイルの名前の関数でラップされ

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

他のモジュールと同様にrequireを使用して含まれる純粋なJSコードになりました。例えば、

ファイルは、ファイルシステムから読み込まれ、その内容は、JS関数でも埋め込まれて

CSSだから、私たちのCSSのすべてが今も再びrequireを使用することにより、後に輸入されますJSモジュールである

"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"); 

}] 

== myapp.css == 

/* CSS declarations go here */ 

body { 
    background-color: lightblue; 
} 

はに変身を取得します。

結論

すべてのファイルが一つの方法であるか、または別のは、AMD/CommonJSモジュールとして含めるための同様の規則に従うJSモジュールに変換されます。 別のモジュールがそれらを参照する場合、それらは組み込み/バンドルされます。

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

資産はJSモジュールに変換された後、彼らの両方がrequireで自分の等価な形式にtranspiledされています。それらのすべては、JSコード に変換されるためと偽り、構文の背後に魔法ありません。

importsディレクトリに静的資産を配置する方法は公式ドキュメントには記載されていませんが、 静的資産をインポートするこの方法が機能します。

これはMeteorがどのように機能するかのように思われるので、この機能は長い間そこに存在するはずです。

この機能を呼び出すかどうかわかりませんが、より適切な説明は予期しない結果になる可能性がありますが、 はユーザーの観点からのみ真実です。コードを書いた人は、 これを故意にこのように設計しました。

+1

ちょうど好奇心から、これらの 'コンパイルされた' HTML/CSSコードをどこで見つけましたか? –

+1

'.meteor/local/build/programs/web.browser/app/app.js' –

+1

' ../imports 'に '..'をドロップすることができます。'/imports/... 'あなたは何レベルのレベルまで追跡する必要はありません。 –

0

ES6から、この動作を確認するためにアプリをダウンロードすることができますエクスポートとインポートは、機能的には流星1.3で利用可能です。現在のデフォルトテンプレートengingeであるBlazeを使用している場合は、HTMLファイルとCSSファイルをインポートするべきではありません。インポート/エクスポート機能はありますが、ビューを作成するために間違った方法を使用している可能性があります。

+0

これは標準的なアプローチではないことがわかりました。問題は残っています:バグや機能? –

+0

どちらもありませんか?インポートとエクスポートが可能です。バグとは何ですか? –

+0

私が質問したのは、 'import'キーワードを使ってHTMLファイルとCSSファイルを含めることができなかったことです。そして、このような問題をまだ説明していない文書は見つかりませんでした。私は、特別な場所に配置しなくても、資産を明示的にインポートしてから、マジックローディングメカニズムに頼っているという事実が気に入っています。なぜこの行動がいつも存在するのか、一部で無効になるのかを知りたいのです将来のポイント。 –

2

Meteor 1.3の機能の1つは、ファイルを/importsフォルダに配置するレイジーローディングであり、熱心に評価されません。流星ガイドから

引用:

完全にモジュールシステムを使用して、我々のコードのみ は、我々はそれを要求したとき、私たちはあなたのアプリケーションコードのすべてが輸入の内側 を配置する必要がありますことをお勧めします実行されることを確認するには/ディレクトリ。これは、メテオの ビルドシステムは、インポートを使用して別のファイル から参照されている場合、そのファイルのみをバンドルしてインクルードすることを意味します。

したがって、/importsフォルダーからファイルをインポートすることで、CSSファイルを読み込み遅延させることができます。私はそれが特徴だと言うでしょう。

+0

これはCSSやHTMLファイルなどの静的アセットをインポートできる理由を説明していません。 –

+0

レイジーローディング、CSSモジュール、jssなど。これはあなたのjsファイルにcssをインポートする必要がある理由です。私はHTMLのインポートのユースケースは何か分かりません。 – sammkj