web-magic v0.1.1

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

themeConfig.navs 的配置

webpackConfig 的配置

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

webpackConfig:

规范的文件结构

什么是规范的文件结构：

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