x- 发动机
此模块是一个集成库 x-dash 任何兼容运行时间的组件.
安装
此模块在节点12上得到支持,并在npm上得到分发.
npm install -S @financial-times/x-engine
您还需要安装您选择的运行时间和任何相关的依赖性 。 一些兼容的运行时间是:
* Hyperapp的使用取决于对高阶组件的小修改才能接受 children 作为第二个论据,而不是收到所附的理由 props。 。 。 .
配置
要启动, 您必须在内部指定运行时间配置 package.json。此指示 x-engine 用于您环境的模块。 您可以根据您的需要指定不同的服务器和浏览器渲染运行时间 .
这个模块包括几个流行工具和框架的预设,包括React,Preact,和Hyperons. 例如,在服务器上使用Hyperons,在浏览器中使用Preact,您可以使用其预设的名称:
{
"x-dash": {
"engine": {
"server": "hyperons",
"browser": "preact"
}
}
}
但如果您所选择的工具没有预设,则可以提供扩展的配置格式。 下面的例子说明如何装入 VDO 模块并使用其 createElement 工厂函数* 联合国数字 :
{
"x-dash": {
"engine": {
"server": {
"runtime": "vdo",
"factory": "createElement"
}
}
}
}
* JSX工厂职能是一种变相职能页:1 签名 fn(element, properties, ...children),示例包括: React.createElement 财务报告和审定财务报表 Preact.h见 FAQ 区域 更多信息.
• Variadic 表示该函数接受数量不等的参数。 这个 ... 在最后的参数名称是休息参数之前,表示它会收集"其余"参数.
渲染
服务器侧
如果选中的运行时工厂返回字符串, 您可以将属性传递到组件, 并立即使用返回的值 :
const { Teaser } = require('@financial-times/x-teaser');
app.get('/teaser', (request, response) => {
const properties = { … };
response.send(Teaser(properties));
});
但是,如果你的工厂方法返回一个特定框架的中间代码,那么你需要加载指定的渲染方法来使节点变成字符串或流:
const { render } = require('@financial-times/x-engine');
const { Teaser } = require('@financial-times/x-teaser');
app.get('/teaser', (request, response) => {
const properties = { … };
const nodes = Teaser(properties);
response.send(render(nodes));
});
客户端
要在客户端使用组件, 您首先需要添加 x-engine 您的 Webpack 配置文件的插件 。 盖子下面这个用 DefinePlugin 连接您选择的运行时间.
// webpack.config.js
const xEngine = require('@financial-times/x-engine/src/webpack');
module.exports = {
plugins: [
xEngine()
]
};
然后可以安装和使用 x- 在客户端代码中的组件 :
import { h } from '@financial-times/x-engine';
import { Teaser } from '@financial-times/x-teaser';
export default const TeaserList = (props) => (
<ul class="TeaserList">
{props.items.map((item) => (
<li className="TeaserList-Item">
<Teaser {...item} layout="small" showImage={true} />
</li>
))}
</ul>
);
通过 n-ui 客户端
为了配置 n-ui 编译基于 x- dash .jsx 您还需要将以下文件添加到 n-ui-build.config.js。 。 。 .
// n-ui-build.config.js
const xEngine = require('@financial-times/x-engine/src/webpack');
module.exports = {
plugins: [
xEngine()
],
pragma: 'h'
};
您还需要从 x-engine 每个 .jsx 文档.
import { h } from '@financial-times/x-engine'
财务问题
这听起来很复杂... 是魔力黑盒吗?
没有魔法 服务器边集成的源代码不到60行的不刺激代码. 用于客户端使用的Webpack插件甚至更小.
什么是"构件功能"?
工厂功能是带有签名的活字函数 fn(element, properties, ...children),示例包括: React.createElement 财务报告和审定财务报表 Preact.h。它可能返回框架对 HTML 节点或格式化字符串的表示,这取决于您使用的运行时间.
我该用哪段时间?
随便你 反应,Preact,Rax,和Nerv基本上都是相容的. 如果你不希望一个框架的间接费用,或者正在渲染静态的HTML,那么就值得调查Hyperons或VDO模块.
超标呢?
超标当前只支持通过标记名(a string)作为第一个参数. 此限制意味着您目前无法参考其他组件中的组件 .