)
}
}
```
```html
// templates/login.handlebars
```
```js
// views/LoginView.js
var LoginView = Backbone.View.extend({
el: '#login',
events: {
'click button': 'handleLoginClick'
},
handleLoginClick: function () {
...
},
render: function() {
...
}
})
module.exports = LoginView
```
模板是预编译的,从您的 React 组件内部可以调取 html , 必要时在 `props.templates` 键.
#### 自定义渲染器
如果您喜欢使用 React 以外的渲染引擎, 没有问题 -- -- 只要在自定义渲染函数中通过返回字符串:
```js
import renderToString from "preact-render-to-string"
const html = await stitch({
layout: "templates/loginLayout.pug",
config: {
componentRenderer: renderToString,
},
blocks: {
body: App,
},
})
```
此外,如果您想要覆盖任何默认的模板引擎(例如,将返回什么) `require('handlebars')`) 您可以通过更新实现 `config.engines`数字 :
```js
const html = await stitch({
layout: "templates/loginLayout.pug",
config: {
engines: {
handlebars: (filePath, locals) => {
return customHandlebarsRenderer(filePath, locals)
},
pug: (filePath, locals) => {
return customPugRenderer(filePath, locals)
},
},
},
blocks: {
body: App,
},
})
```
#### 样式组件支持
如果您的 React 应用程序使用 [`styled-components`](https://www.styled-components.com/),确保您安装 [bail-plugin 类组件](https://github.com/styled-components/babel-plugin-styled-components) 并允许服务器端通过配置渲染 :
```js
import styled from "styled-components"
const html = await stitch({
layout: "templates/layout.pug",
config: {
styledComponents: true,
},
blocks: {
body: props => {
const Layout = styled.div`
background: purple;
border: 1px solid black;
color: white;
width: 100%;
`
return
Hello Styled Components!
},
},
})
```
最后,请在您的布局模板中显示您的样式 :
```pug
html
head
!= css
body
#react-root
!= body
```
## 完整 API
```js
const html = await stitch({
/**
* Sets a base path from which to fetch templates.
*
* @type {String}
*/
basePath: process.cwd(),
/**
* Path to layout template file / component.
*
* @type {String|Component}
*/
layout:
/**
* Block sections to pass to template / components. A "block" typically
* represents a discreet section (header, body, footer, etc) but can be
* anything.
*/
blocks: {
/**
* @type {String|Component}
*/
},
/**
* Locals represent Express.js locals as they flow through the `req` / `res`
* cycle. These values could be passed to the following section, `data`, but
* for the sake of clarity and isolation they're typically passed along here.
*
* Accessible from within components via `props.locals` and from within a
* template via `locals`
*/
locals: {
/**
* @type {*}
*/
},
/**
* Data that is passed to templates and components. Embedded directly
* within template code, but also accessible via `data` (useful for
* JSON.stringify'ing and passing down the wire for rehydration). In a
* component, it represents `props` and is accessible as such.
*/
data: {
/**
* @type {*}
*/
},
/**
* Templates / Components that are precompiled and passed along as rendered
* html strings. From within your component, template html is accessible via
* `props.templates`
*/
templates: {
/**
* @type {String|Component}
*/
},
config: {
/**
* Configuration for layout renderer. Right now components are rendered via
* ReactDOM, but any kind of engine can be passed in and accommodated
* assuming it returns a string of rendered markup.
*
* @type {Function}
*/
componentRenderer: ReactDOM.renderToString,
/**
* If you would like to override any default template engines pass in a
* key matching the extension and a function, e.g.,
*
* engines: {
* pug: (filePath, locals) => string
* }
*/
engines: {
/**
* @type {Function}
*/
},
/**
* If your project uses and you would like to extract
* styles from your component during server-side renders, set this to true.
*
* See https://www.styled-components.com/docs/advanced#server-side-rendering
* for more information.
*
* @type {Boolean}
*/
styledComponents: false
}
})
```
## 解决问题
> 帮帮我! 我的观点不能改变,有 `Unexpected token (` 在我的操纵台上.
所有的例子都假设你让 [代理/ 等待](https://medium.com/@Abazhenov/using-async-await-in-express-with-node-8-b8af872c0016),在节点的版本中默认出现 `7.6.0`. 如果你得到这个错误,它很可能是在使用一个尚未支持这个特性的更老版本. 没有恐惧 - 即兴/等待 只是围着承诺的一圈:
```js
stitch({ layout: "layout.ejs" })
.then(html => {
res.send(html)
})
.catch(error => {
next(error)
})
```
> Async / 等待在我的"节点"版本中被支持,但我在浏览器里没有看到任何东西,控制台里也没有出错!
你还记得使用 `await` 关键字在前面 `stitch`很容易忘记:
## 发展
### 承诺和部署
这个项目使用 [自动释放](https://github.com/intuit/auto-release#readme) 可以在每张公关上自动发布。 每个公关应该有一个符合以下内容的标签
- 版本: 三维
- 版本: 补丁
- 版本: 次要
- 版本: 主要
没有释放发生在一个 `Trivial` 更新.
## 常见问题
### @artsy/stitch 是什么？
帮助您的组件和模板依赖和平共处
### 如何安装 @artsy/stitch？
在项目目录运行 npm install @artsy/stitch，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.5\.0）、react-dom（^16\.5\.0）、styled-components（4\.0\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @artsy/stitch 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @artsy/stitch 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @artsy/stitch 可以商用吗？
@artsy/stitch 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @artsy/stitch 的下载量有多少？
根据 npm 官方下载统计，@artsy/stitch 在 2026/10/07 – 2026/11/05 这 30 天内被下载 8,189 次，日均约 273 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @artsy/stitch 还在维护吗？
最新版本 6\.5\.0 发布于 2022/04/13（4 年前）；至今共发布 58 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/08/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。