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

night-kay

v0.3.5

Published

night-kay

Downloads

7

Readme

night-kay

React微前端架构方案

夜凯:第八门·死门之后的最终奥义

理念

将前端应用由单一的SPA应用转变为多个子应用聚合为一的应用,各个子应用还可以单独开发、测试、部署

应用划分为product和各个子app

product

处理页面公用部分逻辑,进行子应用的注册

app

负责自身业务逻辑逻辑,注册路由与组件的对应关系

使用

应用注册

product与子app在不同项目中时

// product
import nightKay from 'night-kay'

nightKay.registerApplication('user', {
  path: '/user',
  entry: 'user.js'
}

// user.js
import nightKay from 'night-kay'

nightKay.registerRoutes('user', [
  {
    path: '/home',
    component: require('bundle-loader?lazy!./container/home')
  },
  {
    path: '/profile',
    component: require('bundle-loader?lazy!./container/profile')
  }
])

product与子app在同一项目时(component也可以使用bundle-loader)

// product
import nightKay from 'night-kay'

nightKay.registerApplication('user', {
  path: '/user',
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/profile',
      component: Profile
    }
  ]
})

路由配置

import {
  HashRouter as Router,
  Switch
} from 'react-router-dom'

<Router>
  <Switch>
    { nightKay.routes() }
    <Route component={NoMatch} />
  </Switch>
</Router>

公共依赖

子app的公共依赖放到product中去处理

@antv/data-set @antv/g2 antd axios babel-polyfill mobx mobx-react react react-dom react-router-dom

webpack

product负责把公共依赖包打包成vendor

import 'babel-polyfill'

window.React = require('react')
window.ReactDOM = require('react-dom')
window.ReactRouterDOM = require('react-router-dom')
window.MobX = require('mobx')
window.MobXReact = require('mobx-react')
window.antd = require('antd')
window.G2 = require('@antv/g2')
window.DataSet = require('@antv/data-set')
window.axios = require('axios')
window.nightKay = require('night-kay')

product和各app在webpack里配置

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'react-router-dom': 'ReactRouterDOM',
  'mobx': 'MobX',
  'mobx-react': 'MobXReact',
  'antd': 'antd',
  '@antv/g2': 'G2',
  '@antv/data-set': 'DataSet',
  'axios': 'axios',
  'night-kay': 'nightKay'
}

子app构建

css命名空间

子app会渲染在有night-kay-app-${name}类名的容器下

配置postcss的namespace为所有css加上该类名的namespace

jsonp函数名

各个子app需要配置唯一的webpack jsonp名称

output: {
  jsonpFunction: 'webpackJsonp' + Date.now()
}

权限判断

其他注意事项

注意不能使用babel-plugin-import,否则引用到的antd组件不是同一份,会导致ConfigProvider配置不生效

子app从概念上相当于一个独立的项目,即使和product放在同一项目里实现,也不要直接import自身文件夹以外的文件,方便日后迁移出去

可以通过mobx inject,或者nightKey.define来实现对其他模块的访问