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

express-tsx

Package Overview
Dependencies
Maintainers
1
Versions
103
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

express-tsx

express view engine

  • 4.1.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
33
increased by371.43%
Maintainers
1
Weekly downloads
 
Created
Source

介绍

express 视图引擎 tsx 的实现 .

安装

npm install express-tsx typescript --save

使用示例

主文件

//创建包含 express-tsx 视图引擎的 express 服务
const { expressTsx,expressTsxMiddleware } = require('../')
const server = expressTsx(__dirname)
//服务监听
server.listen(9000,function(){ console.log(`server is running on ${this.address().port}`) })
//**注意**:在渲染视图前需要根路由注入中间件
server.use(expressTsxMiddleware)
//渲染视图
server.use('/',(req,res)=>res.render('./view.tsx'))

视图文件

import React = require('react')
console.log('express-tsx' as any)
export default ()=>
<div>
  hello world
</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 将该文件及其引用的文件进行编译
  • 调用用 res.locals.express_tsx_html 函数 返回用来渲染界面的html文件
  • 通过require('express-tsx').middleware返回编译成es5js文件
  • 浏览器通过 browser.int.ts 渲染界面

深入使用

示例1

替换 res.locals.express_tsx_html 函数来输入你自己的 html 结构来应对 seo 等情况
  • 替换res.locals.express_tsx_html函数, 相关代码片段:
    源文件
    const render2 = expressTsx(__dirname)
    render2.use((req,res,next)=>{
      let originTsxHTML = res.locals.express_tsx_html
      res.locals.express_tsx_html = async(...r)=>{
        return (await originTsxHTML(...r)).replace(`<body>`,`<body>render by diy html function`)
      }
      next()
    })
    render2.use('/',(req,res)=>res.render(renderFile))
    

Keywords

FAQs

Package last updated on 23 Jul 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc