我对Meteor 1.3中的ES2015 modules
感到非常兴奋。我们用Meteor 1.2编写了一个中等复杂度的应用程序。由于我们有大量的模板和文件,因此在客户端下载内容需要花费一些时间。所以我对使用import
的延迟加载功能感兴趣。从meteor night talk开始,他们说Blaze模板仍然是全局的,无法导入(或延迟加载),我尝试过using React
inside Blaze
。
react-template-helper
meteor add react-template-helper
个包
创建imports
文件夹并添加导出'TestComponent'的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>
);
}
}
在imports
文件夹外的Blaze模板中
<!-- homeReact template html-->
<template name="homeReact">
<div>
{{> React component=TestComponent}}
</div>
</template>
在模板的js文件中,该文件也在导入文件夹
之外// homeReact template js
import { Template } from 'meteor/templating';
import TestComponent from '/imports/testComponent.jsx`;
Template.homeReact.helpers({
TestComponent() {
return TestComponent;
}
});
虽然当前路由不需要imports/testComponent.jsx
模板,但是homeReact
已下载到客户端上(使用chrome dev工具 - 来源选项卡进行检查)。
然后我使用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
参数。
所以,我的问题是,是否可以在需要时延迟加载(下载)文件?