npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@srejs/react-webpack

v1.4.0

Published

srejs react框架webpack配置工具包

Downloads

22

Readme

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

谁在使用