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

wei-type

v1.0.0

Published

### 背景

Downloads

2

Readme

集团微前端标准

背景

集团微前端标准的制定是时代发展的产物。2019年集团内外微前端框架如雨后春笋般出现,并在各 BU 落地了对应的业务实践。同时一些对微前端有定制化需求的 BU 想快速复用,但技术选型存在很高的门槛,对想要进入的 BU 成本非常大。

技术方面,各个微前端框架各自为战。解决同一个问题可能会出现不同或大致相同的技术方案,一方面微前端的技术发展存在一定的内耗,另一方面微前端生态体系已有萌芽。

目标

标准收敛为一套,促进微前端生态圈发展,支撑业务 BU 快速做技术决策。

共建思路图

集团标准草案

https://yuque.antfin-inc.com/mo/wei/specification

Usage

安装依赖

tnpm i @ali/wei-api --save

开始使用

import { IAppConfig, IAppManifest, IOptions, IApp } from '@ali/wei-api'

const appConfig: IAppConfig = {
  name: "wei-micro-app-example1",
  entry: [
    "//wei.alicdn.com/micro-app-example/0.1.0/index.js",
    "//wei.alicdn.com/micro-app-example/0.1.0/index.css"
  ],
  activePath: '/demo1',
  // 传递下发的props
  props: {
    title: 'currentTitle'
  },
  // 根据 string 运行时查找DOM节点
  container: "#root-slave",
}

API

路由配置化规范

import { setup, start } from '@ali/wei';
import Sandbox from '@ali/sandbox;

setup({
    appConfigs: [{
    name: "wei-micro-app-example1",
    entry: [
      "//wei.alicdn.com/micro-app-example/0.1.0/index.js",
      "//wei.alicdn.com/micro-app-example/0.1.0/index.css"
    ],
    activePath: '/demo1',

    // 传递下发的props
    props: {
      title: 'currentTitle'
    },
   
    // 根据 string 运行时查找DOM节点
    container: "#root-slave",
  }, {
    name: "wei-micro-app-example2",
    entry: {
      "scripts": [
        "//wei.alicdn.com/micro-app-example/0.1.0/chunk-libs.js",
        "//wei.alicdn.com/micro-app-example/0.1.0/index.js"
      ],
      "styles": [
        "//wei.alicdn.com/micro-app-example/0.1.0/chunk-libs.css",
        "//wei.alicdn.com/micro-app-example/0.1.0/index.css"
      ]
    },
    activePath: '/demo2',
  }, {
    name: "wei-micro-app-example3",
    entry: "//wei.alicdn.com/micro-app-example/0.1.0/index.html",
    activePath: '/demo3',
  }],
  options: {
    sandbox: new Sandbox(),
    prefetch: true,

    // 生命周期钩子函数
    beforeMount: (app) => {},
    // ...
  },
})
start();

注册及运行函数规范

| 配置 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | setup | 注册 app 微应用函数 | IConfig | 是 | [] | | start | 开始运行微应用函数 | - | 是 | - |

IConfig - 微应用全局配置规范

| 配置 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | appConfigs | 微应用配置集 | IAppConfig[] | 是 | - | | options | 额外的配置 | IOptions | 是 | - |

IAppConfig - app 配置规范

| 配置 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | name | 微应用名称,用以标识一个微应用。 | string | 是 | - | | entry | 微应用的资源信息描述。 | string | [string, string] | <IAppManifest> | 是 | - | | activePath | 微应用受当前路由影响的激活规则。 | IActivePath | 是 | - | | container | 微应用挂载的节点。 | HTMLElement | 是 | - | | props | 微应用传入的参数 | object | 是 | - |

IOptions - 微应用配置规范

| 配置 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | sandbox | 是否启用内置的沙箱隔离,或者使用自定义的沙箱实例。 | boolean | ISandbox | 否 | false | | prefetch | 是否预加载微应用的资源。 | boolean | 否 | false | | activePath | 微应用受当前路由影响的激活规则。 | IActivePath | 是 | - | | container | 微应用挂载的节点。 | HTMLElement | 是 | - | | props | 微应用传入的参数 | object | 是 | - | | beforeMount | 微应用生命周期 - 加载前 | - | - | - | | afterMount | 微应用生命周期 - 加载后 | - | - | - | | beforeUnmount | 微应用生命周期 -卸载前 | - | - | - | | afterUnmount | 微应用生命周期 - 卸载后 | - | - | - | | beforeUpdate | 微应用生命周期 -更新前 | - | - | - | | afterUpdate | 微应用生命周期 - 更新后 | - | - | - |

IAppManifest - entry 配置规范

| 配置 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | script | js 相关资源 | string[] | 是 | - | | styles | css 相关资源 | string[] | 是 | - |

手动加载规范

import React, { useEffect, useRef } from 'react'
import { createMicroApp } from '@ali/wei';
interface IApp extends Required<IAppConfig> {
  load(): void;
  mount(container: HTMLElement, props?: object): void;
  unmount(): void;
  update(props?: object): void;
}
const APP = () => {
  const containerRef: React.MutableRefObject<any> = useRef();
  
  useEffect(() => {
    const WidgetInstance: IApp = createMicroApp({
      name: 'widgetName',
      container: containerRef.current,
      entry: [
        "//wei.alicdn.com/micro-app-example/0.1.0/index.js",
        "//wei.alicdn.com/micro-app-example/0.1.0/index.css"
      ],
    }, {
      sandbox: true,
      prefetch: true
    })
    WidgetInstance.load();
  }, [])
  
  return (<div ref={containerRef}></div>)
}

注册函数规范

| 配置 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | createMicroApp | 注册 app 微应用入口 | IConfig | 是 | [] |

返回实例规范

| 配置 | 说明 | 类型 | 是否必填 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | load | 加载子应用 | - | - | - | | mount | 子应用生命周期 - 装载后触发 | HTMLElement , Props | - | - | | unmount | 子应用生命周期 - 卸载后触发 | - | - | - | | update | 子应用生命周期 - 更新时触发 | props | - | - |