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

web-magic

v0.1.1

Published

web服务启动脚手架

Downloads

4

Readme

tf-magic-runner 组件脚手架

提供在一个或多个组件的组件项目中,或业务项目中,对react的js、ts组件模块进行: 组件打包、本地预览效果启用、一键发布预览系统到生成的脚手架。使前端在提供组件的过程更便捷,高效。

安装到全局

npm i tf-magic-runner -g

脚手架提供的命令

/* 可以在终端输入:magic, 打印以下内容 */

Usage: magic [options] [command]

Options:
  -v, --version                   output the version number
  -h, --help                      display help for command

Commands:
  create <packageName>            clone a package into a newly created directory
  init                            create config file into current project
  start [port=3001] [mock=false]  start run PreviewApp, default use mock data
  pack                            pack components
  publish                         publish PreviewApp(childApp) to online
  help [command]                  display help for command

脚手架的配置

在组件包、或项目的根目录中,需要有一个runner.config.js文件,用于配置构建逻辑。

配置解决了哪些问题

  1. 预览子应该发布后的base路径

  2. 打包预览子应用时的输出文件目录

  3. 预览子应用系统配置: 使脚手架可以找到组件的markdown文件、组件入口文件、组件mock数据的文件;

    (如果你的组件的文件结构属于【规范的文件结构】, 那么这项也可以不配置)

  4. webpack中别名的配置及接口代理配置

配置例子

下面我们来看一个例子, 这是执行 magic create *** 后,在生成的组件包中的配置文件。

/* runner.config.js */
const path = require('path');
const package = require('./package.json');
module.exports = {
  base: `/${package.name}/`,  // 子应用base路径, 默认为包名
  outputPath: './dist', // 打包文件输出地址;配置值时,基于项目根目录,默认为:'./libDist'
  themeConfig: {
    root: './', // 设置组件文件存放根目录,配置值时,基于项目根目录(也就是项目根目录)默认为:./src/components
    navs: [
      {
        path: '/',
        mdx: './README.md',
        title: '组件脚手架介绍',
      },
    ],
  },
  webpackConfig: (config, options) => {
    config.resolve.alias = {
      '@/utils/request': options.requestPath, // 用脚手架的requer方法,打包时会忽略此文件
      '@': path.join(__dirname, 'src'),
      [package.name]: path.join(__dirname)
    };
    config.devServer.proxy = {
      '/api': {
        target: 'http://api.tf56.lo/',
        changeOrigin: true,
      },
    };
    return config;
  },
};

配置的API

| 参数 | 必传 | 类型 | 说明 | 默认值 | | --- | :-: | --: | --: | --: | --- | | base | | string | 预览子应用base路径 | package.json 中的 name 字段的值| | outputPath | | string | 打包预览子应用时的输出文件目录 | './libDist' | | themeConfig | | Object | 预览子应用系统配置: 使脚手架可以找到组件的markdown文件、组件入口文件、组件mock数据的文件; | {} | | themeConfig.root | | string | 设置组件文件存放根目录, 1)用于查找themeConfig.navs中配置的文件地址的基础路径; 2) 用于自动查找.mdx文件的基础路径 | './src/components' | | themeConfig.navs | | Array | 设置组件目录:如果不想配置此项,请按【规范的文件结构】来放文件 | 此处不配置,将从 themeConfig.root 目录中去查找.mdx 的文件,对组件文件结构有要求 | | webpackConfig | * | function | 可拦载 webpack, 配置 alias、proxy,返回新的 config | |

themeConfig.navs 的配置

| 参数 | 必传 | 类型 | 说明 | 默认值 | | --- | --- | --: | --: | --: | | path | | string | 路由地址 | 当前 mdx 文件的父级目录名称 | | title | | string | 组件名称(显示在子系统左则菜单中) | 当前 mdx 文件的父级目录名称 | | mdx | * | string | md 或 mdx 文件存放路径(相对于 themeConfig.root 的路径) | | | compontent | | string | 此文件对应的组件路径(相对于 themeConfig.root 的路径),用于 npm 打包时组件取到组件列表 | 不传,默认从 mdx 文件的当前目录中去找 index.(ts、js、jsx、tsx)文件 | | mock | | string | mock 文件地址,基于 themeConfig.root 的相对地址 | 不传,默认从 mdx 文件的当前目录中去找mock.(js、ts) |

webpackConfig 的配置

webpackConfig是一个回调函数。参数有二个:

| 参数 | 必传 | 类型 | 说明 | | --- | --- | --: | --: | --: | | config | * | Object | webpack的config对像,可以在这个回调函数中重新编写config。一般我们用到的是config.resolve.alias、config.devServer.proxy | | options | * | Object | 请查看下面的"webpackConfig" |

webpackConfig:

| 参数 | 必传 | 类型 | 说明 | 版本 | | --- | --- | --: | --: | --: | --: | | requestPath | * | string | 为脚手架的request函数文件地址,组件中把requestPath配置为@/utils/request别名,打包时会忽略此文件 | | | model | * | string | 执行时的环境, production、development、pack| 0.2.0|

规范的文件结构

什么是规范的文件结构:

  1. 每个组件为独立的一个文件夹,并且在项目根据目录"./src/components/"目录下;
  2. 组件中需要有以下三个文件:

README.mdx // 组件文档的目录

index.(js|ts|jsx|tsx) // 组件的入口文件

mock.js // 如果此组件使用了接口,那个这个文件必须有,否则发布到线上,请求不到数据

如图:

文件结构{width=500}

版本更新

v0.3.2 作者:田艳容 发布日期: 2021-01-03

  • magic pack打包组件时,依然保持使用webpack4打包,以兼容webpack4下的项目使用组件包

v0.3.0 作者:田艳容 发布日期: 2020-11-27

  • 执行magic pack输出umd模块时,antd按需依赖加载(antd/lib/*)
  • 获取mock数据优化的优化
  • 升级webpack V4 > webpack V5

v0.2.0 作者:田艳容 发布日期: 2020-07-29

  • 在配置参数webpackConfig: (config, options)中,增加options.model的参数返回
  • 组件magic publish发布后,可直接在子系统中在线提交组件审核

v0.1.9 作者:田艳容 发布日期: 2020-06-28

  • 提供命令有:create、init、start、publish、pack
  • 公共js,css文件dll打包。在主系统中的子系统使用主系统加载的的dll文件(不再单独加载,除非访问子系统时,才加载)