2

modulesMeteor 1.3の ES2015 にとても興奮しています。Meteor 1.2 で中程度の複雑さのアプリを作成しました。非常に多くのテンプレートとファイルがあるため、クライアント側でコンテンツをダウンロードするのに少し時間がかかります。を使用した遅延読み込み機能に興味がありimportます。meteor night talkから、彼らは Blaze テンプレートはまだグローバルであり、インポート (または遅延ロード) できないと言っています。私はinsideを使用しReactBlazeてみました。

  • を使用して追加されreact-template-helperたパッケージmeteor add react-template-helper

  • フォルダーを作成し、 「TestComponent」をエクスポートするファイルをimports追加しますtestComponent.jsx

    //testComponent.jsx
import React from 'react';

export default class TestComponent extends React.Component {
  render() {
    return (
        <div>
            <h1>TestComponent</h1>
            <div>This is from Test Component</div>
        </div>
    );
  }
}

  • Blaze テンプレートの外部importsフォルダに移動した後、

    <!-- homeReact template html-->
<template name="homeReact">
    <div>
        {{> React component=TestComponent}}
    </div>
</template>

  • importsフォルダーの外にもあるテンプレートのjsファイル

    // homeReact template js
import { Template } from 'meteor/templating';

import TestComponent from '/imports/testComponent.jsx`;

Template.homeReact.helpers({
  TestComponent() {
    return TestComponent;
  }
});

これは機能しましたが、現在のルートがテンプレートimports/testComponent.jsxを必要としない場合でも、クライアントにダウンロードされます (chrome dev tools - sources タブを使用して確認) 。homeReact

それから私はこのようrequireに代わりに使用しましimportた、

    // homeReact template js
    import { Template } from 'meteor/templating';

    Template.homeReact.onCreated(function () {
        this.TestComponent = require('/imports/testComponent.jsx').TestComponent;
    });

    Template.homeReact.helpers({
      TestComponent() {
        return Template.instance().TestComponent;
      }
    });

このコードもimports/testComponent.jsxファイルをダウンロードしますが、さらにエラーも発生しました

テンプレート「homeReact」で、{{> React ... }}欠落しているcomponent引数を呼び出します。

それで、私の質問は、必要な場合にのみファイルを遅延ロード (ダウンロード) することは可能ですか?

4

0 に答える 0