tsx 文件的 express 的视图引擎 , 有人愿意来踩坑么
发布于 7 年前 作者 shynome 4521 次浏览 来自 分享

附上 github 链接 express-tsx

介绍

tsx 文件的 express 的视图引擎 . 警告 : 不能用于生产环境 , 没有打包, 使用的是直接加载模块文件

安装

npm install express-tsx typescript --save

使用示例

主文件

//创建包含 express-tsx 视图引擎的 express 服务
const { expressTsx,expressTsxMiddleware } = require('.https://github.com/shynome/express-tsx/blob/master/')
const server = expressTsx(__dirname)
//开启 express-tsx 热更新 , 默认关闭
server.locals.hotreload = true
//服务监听
server.listen(9000,function(){ console.log(`server is running on ${this.address().port}`) })
//**注意**:在渲染视图前需要根路由注入中间件
server.use(expressTsxMiddleware)
require('https://github.com/shynome/express-tsx/blob/master/requirejs.config')
//渲染视图
server.use(/\/$/,(req,res)=>{
  if(!req.query.callback){ return res.render(./hello.tsx') }
  res.jsonp({word:'world'})
})
//还在测试 redux 中 ; 但状态管理工具并不限制于 redux 
server.get('/redux',(req,res)=>{
  res.render('./views/index.tsx')
})

视图文件

import React = require('react')
console.log('express-tsx' as any)
export type Props = { word:string }
// 导出用以渲染组件的数据
export const props = require('?props');import '?props'; //从 '?props' 中获取服务器数据
// 导出用以渲染的组件或者组件实例 , 导出名为 View || default
export const View:React.StatelessComponent<Props> = (props)=>
<div>
  hello {props.word}
</div>

示例运行

  • 克隆本项目
    git clone https://github.com/shynome/express-tsx.git
  • 安装依赖 ; 进入示例目录 ; 运行
    npm install ; node example
  • 在浏览器中打开 示例:http://127.0.0.1:9000/
    一切正常的话会看到 : hello world

实现流程

  • 使用require('express-tsx').middleware中间件用来注入要使用的数据
  • express 中指定要渲染的文件 , app.use('/path',(req,res)=>res.render(file))
  • 使用 typescript 将该文件及其引用的文件进行编译
  • 调用用 render 函数 返回用来渲染界面的html文件
  • 通过require('express-tsx').middleware返回编译成es5的js文件
  • 浏览器通过 browser.int.ts 渲染界面

附上链接 express-tsx

回到顶部