# web-magic

> web服务启动脚手架

Latest version **0.1.1** (published 2021-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install web-magic
pnpm add web-magic
yarn add web-magic
bun add web-magic
```

Provides the command `magic`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-05-15 |
| First published | 2021-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 62 |
| Unpacked size | 2.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yanrong.tian |
| Maintainers | ucdbook |
| Keywords | runner |

## Links

- npm: https://www.npmjs.com/package/web-magic
- npm.io page: https://npm.io/package/web-magic

## Dependencies (62)

- [antd](https://npm.io/package/antd.md) ^3.26.19
- [less](https://npm.io/package/less.md) ^3.8.1
- [chalk](https://npm.io/package/chalk.md) ^2.4.1
- [react](https://npm.io/package/react.md) ^16.9.0
- [loadjs](https://npm.io/package/loadjs.md) ^3.5.4
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [remark](https://npm.io/package/remark.md) ^12.0.0
- [rollup](https://npm.io/package/rollup.md) ^2.38.4
- [core-js](https://npm.io/package/core-js.md) ^2.5.3
- [echarts](https://npm.io/package/echarts.md) ^4.4.0
- [express](https://npm.io/package/express.md) ^4.17.1
- [qiankun](https://npm.io/package/qiankun.md) ^2.3.2
- [request](https://npm.io/package/request.md) 2.81.0
- [webpack](https://npm.io/package/webpack.md) ^5.10.3
- [webpack4](https://npm.io/package/webpack4.md) ^4.44.2
- [commander](https://npm.io/package/commander.md) ^5.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.9.0
- [css-loader](https://npm.io/package/css-loader.md) ^1.0.0
- [mocker-api](https://npm.io/package/mocker-api.md) ^2.1.0
- [tf-request](https://npm.io/package/tf-request.md) ^0.2.0
- [typescript](https://npm.io/package/typescript.md) ^4.0.5
- [url-loader](https://npm.io/package/url-loader.md) ^4.1.1
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.1.2
- [file-loader](https://npm.io/package/file-loader.md) ^6.2.0
- [less-loader](https://npm.io/package/less-loader.md) ^5.0.0
- [remark-attr](https://npm.io/package/remark-attr.md) ^0.11.1
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.2.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.1.5
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.4
- [browserslist](https://npm.io/package/browserslist.md) ^4.14.7
- [react-router](https://npm.io/package/react-router.md) ^5.1.2
- [style-loader](https://npm.io/package/style-loader.md) ^0.23.0
- [@mdx-js/react](https://npm.io/package/@mdx-js/react.md) ^1.6.1
- [remark-images](https://npm.io/package/remark-images.md) ^2.0.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.6.3
- [@mdx-js/loader](https://npm.io/package/@mdx-js/loader.md) ^1.6.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^3.0.0
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^4.3.11
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.1.2
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.12.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.11.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.0.0
- [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ^1.13.1
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.0.0-alpha.14
- [tf-remark-url-image](https://npm.io/package/tf-remark-url-image.md) ^0.1.0
- [@mapbox/rehype-prism](https://npm.io/package/@mapbox/rehype-prism.md) ^0.4.0
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^3.0.0
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) ^4.1.0
- [webpack-node-externals](https://npm.io/package/webpack-node-externals.md) ^2.5.2
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.11.0
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.1.0
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.1.0
- [remark-autolink-headings](https://npm.io/package/remark-autolink-headings.md) ^6.0.0
- [progress-bar-webpack-plugin](https://npm.io/package/progress-bar-webpack-plugin.md) 2.1.0
- [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^1.1.5
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.23.0
- [typings-for-css-modules-loader](https://npm.io/package/typings-for-css-modules-loader.md) ^1.7.0
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.6.2
- [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.1.2
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.0.0
- [@babel/plugin-transform-object-assign](https://npm.io/package/@babel/plugin-transform-object-assign.md) ^7.2.0
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.1.0

## Recent versions

- 0.1.1 (latest) — 2021-05-15

## README

# tf-magic-runner 组件脚手架

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

## 安装到全局

```bash
npm i tf-magic-runner -g
```

## 脚手架提供的命令

```bash
/* 可以在终端输入：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 *** 后，在生成的组件包中的配置文件。

```jsx
/* 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   // 如果此组件使用了接口，那个这个文件必须有，否则发布到线上，请求不到数据

如图：

![文件结构](./doc/assets/wenjianjiegou.png){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文件(不再单独加载，除非访问子系统时，才加载)

---
_Source: https://npm.io/package/web-magic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._