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

ykit-config-ssr

v0.3.7

Published

ykit + react + react-router-v4 + ssr

Downloads

8

Readme

ykit-config-ssr

ykit + react(16) + react-router(v4) ssr 插件

如何开始

可以利用该插件初始化项目,在一个空的目录下执行:

ykit init ssr

会在当前目录下生成一个初始工程。然后启动项目:

ykit start

访问 http://localhost:3000/ 即可。

如何使用

代码主要分为两部分

/src —— 业务代码

首先业务需要提供一个 index.js 来配置页面,一个简单的示例:

import 'babel-polyfill';

// 引入页面
import Home from './home';
import Detail from './detail';

// 引入 axios 来获取数据
import axios from 'axios';

// 需要实现一个 getPages 方法来配置页面
export function getPages() {
    return [
        {
            path: '/', // 路径规则
            component: Home, // 页面组件
            exact: true, // 同 react-router <Route> 的 exact 属性
            getProps: async() => { // 可在这里获取页面需要的数据
                const { data: posts } = await axios.get(
                    'http://yapi.demo.qunar.com/mock/818/tvmaze/list'
                );
                return { posts };
            }
        }, {
            path: '/detail/:id',
            component: Detail
        }
    ];
}

通过 index.js 封装了页面的各项配置,业务不需要再自己配置 router,只用编写页面组件并从 index.js 引入即可。

/ssr —— 工具生成的服务端代码

业务不需要关心里面有什么,也不需要管理和维护它,由工具自动生成。如果有特殊需求也可以去进行改动。

这样一来,业务不用关心服务端代码,以及 web 和 hy 如何适配,只要根据页面编写业务逻辑即可。同时还可以配置 getProps 来获取初始属性(页面数据等),框架可以智能地提前加载数据来渲染页面(由框架决定是在服务端还是客户端获取数据)。

如何实现页面跳转

通过引入 ssr 目录下封装的 link 组件(TODO: 这里需要封装到工具里,而不是从路径引),即可实现页面跳转,使用方法同 react-router v4 中的 <Link>

import Link from '../ssr/share/link';

const Home = (props) => {
    return (
        <div>
            <h1>Home Page</h1>
            <Link to={`/detail`}>
                <p>点击我可以跳转到详情页</p>
            </Link>
        </div>
    )
}

如何部署

首先构建前端资源:

ykit pack -m

然后可以直接使用 pm2 等进行部署,如:

NODE_ENV=production pm2 start ssr/bin/start

示例

查看:https://github.com/roscoe054/ykit-starter-ssr