@srejs/webpack

    1.2.7 • Public • Published

    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)
    参数 说明 默认值
    app koa实例对象 必传
    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

    谁在使用

    Install

    npm i @srejs/webpack

    DownloadsWeekly Downloads

    19

    Version

    1.2.7

    License

    MIT

    Unpacked Size

    105 kB

    Total Files

    30

    Last publish

    Collaborators

    • dazjean