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

@srejs/react-webpack

Package Overview
Dependencies
Maintainers
2
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@srejs/react-webpack

srejs react框架webpack配置工具包

  • 1.4.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
decreased by-66.67%
Maintainers
2
Weekly downloads
 
Created
Source

Server rendering engine, abbreviated as srejs, is the server-side rendering engine. It provides the simplest and most flexible react and Vue lightweight server-side rendering skeleton tool for each node development framework, and supports the use in any koa framework.

download License Node

Server rendering engine 缩写为 Srejs, 即服务器端渲染引擎,为各个node开发框架提供最简单,最灵活的React,Vue轻量级服务端渲染骨架工具,支持在任何koa框架中使用。

目录

框架默认配置属性rootDir默认为根目录下web,pages下是页面组件入口,比如list页面,目录结构为list/index.js

└── web
    └── pages
        └── list
            ├── index.tsx
            └── index.scss

页面组件

import React from 'react';
type typeProps = {
    ListData :[string]
}
export default function (props:typeProps){
     const {ListData} = props;
    return (
        <div className="list" style={{textAlign: 'center'}}>
            <h3>列表</h3>
            <ul>
                {ListData.map((item,value)=>{
                    return (
                        <li key={value}>
                           <div className="item">{item}</div>
                        </li>
                    )
                })}
            </ul>
        </div>
    )
}

在Koa中使用

Srejs支持在koa中间件中使用,通过此能力我们可以对任何基于Koa的开发框架进行插件封装,比如Umajs,egg,nest,推荐使用@umajs/plugin-react-ssr提供的解决方案。后续也会发布针对egg,nest使用的插件。

yarn add @srejs/react --save
// app.js
const Koa = require('koa');
const srejs = require('@srejs/react');
const app = new Koa();
// srejs服务端渲染基于koa封装,开启ssr时需传入koa实例对象
const Srejs = new srejs(app,process.env.NODE_ENV != 'production',false,{
    ssr: true, // 开启服务端渲染
    cache: false, // 开启缓存
    rootDir: 'web', // 工程根文件夹目录名称
    rootNode: 'app', // 客户端渲染挂载根元素ID
}); 

app.use(async (ctx,next)=>{
    if(ctx.path==="/list"){
       const html = await Sre.render(ctx,'list',{ListData:['item1','item2','item3','item4',]},{ssr:true,cache:true}); 
       ctx.type = 'text/html';
       ctx.body = html;
    }else{
        await next();
    }
})

app.listen(8001);

API

  • constructor(app: Koa, dev?: boolean, defaultRouter?: boolean, options?: TcoreOptions)
参数说明默认值
appkoa实例对象必传
dev开发模式(NODE_ENV=development)true
defaultRouter默认路由(按照页面组件命名映射后端路由)false
options框架配置属性{ssr: true, cache: false, rootDir: 'web', rootNode: 'app',}
  • render(ctx: Koa.Context, viewName: string, initProps?: object, options?: TssrOptions): Promise.resove(string);
参数说明默认值
ctx请求上下文必传
viewName页面组件名称必传
initProps页面组件初始化props数据
options单页面组件运行配置{ssr: true, cache: false}

属性类型说明

type TssrOptions = {
    ssr: boolean; // 开启服务端渲染
    cache?: boolean; // 开启缓存
};

type TcoreOptions = {
    ssr?: boolean; // 开启服务端渲染
    cache?: boolean; // 开启缓存
    rootDir?: string; // 工程根文件夹目录名称
    rootNode?: string; // 客户端渲染挂载根元素ID
    prefixCDN?: string, // 构建后静态资源CDN地址前缀
    prefixRouter?: string, // 默认页面路由前缀(在defaultRouter设置为true时有效)
};

配置文件

框架也提供静态配置文件方式初始化框架数据,配置文件中的属性将自动和使用时传入的配置进行合并。

// config/ssr.config.js
module.exports = {
    ssr: true, // 开启服务端渲染
    cache: false, // 开启缓存
    rootDir: 'web', // 工程根文件夹目录名称
    rootNode: 'app', // 客户端渲染挂载根元素ID
    prefixCDN: '/', // 构建后静态资源CDN地址前缀
    prefixRouter: '', // 默认页面路由前缀(在defaultRouter设置为true时有效)
}

构建部署

"scripts": {
    "build":"npx srejs build" // 生产环境部署前预编译构建
},

更多说明

example

谁在使用

Keywords

FAQs

Package last updated on 28 Apr 2024

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