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

micro-frontend-mini

v1.0.3

Published

微前端框架,无三方依赖,可兼容所有浏览器

Downloads

7

Readme

使用

micro-frontend-mini 目前暂时支持符合以下条件的项目

  1. React 项目;
  2. 使用哈希路由;

安装

$ npm i micro-frontend-mini

使用示例

import { start } from 'micro-frontend-mini';


start({
  // 子项目要挂载的 DOM 节点
  rootNode: document.getElementById('app'),

  // 子项目配置列表
  projects: [
    {
      // 当前子项目的名称,需要唯一
      appName: 'template-react16',

      // 何时激活该子项目
      activeWhen() {
        return window.location.hash.indexOf('#/react16') === 0;
      },

      // 子项目的入口文件
      entry: `//localhost:8091/template-react16.js`,

      // 传递给子项目的数据,同 React 的 props
      props: { hello: 'hi React16' },

      // 子项目依赖的 ReactDOM 对象
      ReactDOM: window.ReactDOMV16,

      // 子项目依赖的 React 对象
      React: window.ReactV16,

      // 子项目依赖的前置脚本
      scripts: [
        `//localhost:8091/template-react16-dll.vendor.js`,
      ],

      // 子项目依赖的前置样式
      styles: [
        '//web.ewt360.com/common/antd/dev/4.4.2/antd.css',
      ],
    },
  ],
});

配置解释

  1. 框架对外暴露一个 start 函数,接受2个顶级参数。rootNode 子项目要挂载的 DOM 节点;projects 子项目配置列表。
  2. 其中 projects 是一个数组,每个数组元素就是一个项目的配置对象。

针对每个项目的配置参数,以下是具体说明表:

完整示例

基于 micro-fontend-mini 微前端框架的示例项目已同步上传至 github,具体有以下3个仓库作为示例代码:

  1. root-config 示例主项目(微前端框架所在的项目);
  2. tempalte-react16 基于 React16 & webpack4 的示例子项目;
  3. template-react14 基于 React14 & webpack1 且兼容IE8的示例子项目;

如何运行

  1. 克隆以上3个项目到本地,并且在各自仓库下执行 npm i 安装好依赖;
  2. 子项目(tempalte-react16template-react14)执行 npm start 启动即可;
  3. 主项目,Mac 执行 sudo npm start,Windows 以管理员权限运行命令行工具并执行 npm start 即可;
  4. 访问 http://localhost 查看最终效果,如下图所示:

上图中有4个路由,对应属于2个子项目,切换路由的时候,查看控制台的网络请求,可以看到详细的资源加载情况。

micro-frontend-mini 目前是 1.x 版本,后续关于常见框架(比如 Vue)会陆续迭代支持;并且会考虑支持自定义项目挂载和卸载,这样就可以方便任何类型的子项目接入。