Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

express-tsx

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

express-tsx

express view tsx render


Version published
Weekly downloads
5
increased by66.67%
Maintainers
1
Weekly downloads
 
Created

介绍

这是 express 中 jsx 模板渲染的一个实现 .

使用

app 主文件



import Express = require('express')
export const app = Express()

import { render,requirejsConfig,defaultOptions } from "../src";

//你可以在这里配置 requirejs , 这下面是一些默认配置
requirejsConfig({
  paths:{
    'requirejs'   :'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min',
    'react'       :'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react',
    'react-dom'   :'https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom',
  },
  shim:{
    'react-dom'   :['react']
  }
})

app.engine('.tsx',render({
  ssr:false, //推荐关闭
  // ssrRender,
  // ssrWrap, //这个是核心 , 不建议替换
  // placeholder:'loading', //你可以在这里放个 loading 动画
}))
//此外你还可以在 `defaultOptions` 中设置默认值(对已经使用了 `render` 的不起效 )
defaultOptions.placeholder = 'loading'

app.set('views',__dirname+'/views')
app.set('view engine','tsx')

app.get('/',(req,res)=>res.render('ssrRender',{ who:'express-tsx', title:'express-tsx' }))

tsx 视图文件


export default (props)=>
<div onClick={ ()=>alert(props.who) }>
  hello {props.who}
</div>

优化

  • https push 如果你使用 spdy 的话 , 将会预推送文件到客户端 , 加快加载

示例运行

  • 克隆本项目
    git clone https://github.com/shynome/express-tsx.git
    
  • 安装依赖
    npm install
    
  • 运行
    npm test
    
    ps: 如果你使用 vscode 的话 , 你可以直接 f5 运行
  • 在浏览器中打开 示例
  • 最后 , 如果有好的建议欢迎提 issue | pr 哦 !

FAQs

Package last updated on 24 May 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts