web-magic

v0.1.1

Published

2 years ago

web服务启动脚手架

Downloads

0High
0Medium
0Low

ucdbook

runner

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文件，用于配置构建逻辑。

配置解决了哪些问题

预览子应该发布后的base路径
打包预览子应用时的输出文件目录
预览子应用系统配置: 使脚手架可以找到组件的markdown文件、组件入口文件、组件mock数据的文件;
(如果你的组件的文件结构属于【规范的文件结构】, 那么这项也可以不配置)
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|

规范的文件结构

什么是规范的文件结构：

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

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文件(不再单独加载，除非访问子系统时，才加载)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme