fch-cli

起步

安装

npm i -g @fch/fch-cli

创建新项目

fch new|n [options] [name]

fch.json 务必保证当前的project是有的

{
    "collection": "@fch/fch-react-schematic", -- 生成过程用的子schematics
    "type": "web", -- 当前的项目类型 web 和 h5 暂时支持
    "defaultSrcRoot": "/src/solution/", -- 最好不要更改当前的作用路径
    "needRouter": [ -- 哪些生成命令需要额外添加路由注入
        "c"
    ],
    "needDto": [  -- 哪些生成命令需要同时生成dto文件
        "s"
    ],
    "router": {
      "type": "MIC"
    },
    "baseUrl": {  -- 设置service、dto、inerface文件夹所在路径
      "service": "/src/solution/model/services",
      "dto": "/src/solution/model/dto",
      "interface": "/src/shared/interface"
    }
}

options 可选参数

• -d 只能看到生成的目录结构和文件，不会真的生成文件
• -s 跳过安装node_modules

eg.

fch new my-project 可选h5 和 web
# OR
fch n my-project

使用

快速生成文件至当前目录

fch generate|g <schematic> [name]

schematic 可选参数

• c: 生成hooks组件

  fch g c <your-component-name>

• rc: 生成带有reducer的组件

  fch g rc <your-component-name>

• s: 生成请求的service文件

  fch g s <your-service-name>

• d: 生成相应dto文件

  fch g d <your-dto-name>

• m: 生成相应module模板文件

  fch g m <your-module-name>

• table: 生成相应component table模板文件

  fch g table <your-table-name>

• modal: 生成相应modal模板文件

  fch g modal <your-modal-name>

webpack功能

配置

在使用webpack打包构建功能的时候必须保证项目根目录中包含fch.json和fch.webpack.config.js ,两个配置文件文件以及环境变量配置文件。

• fch.json 中的 type 属性用于区分打包目标为 web 还是 h5

• fch.webpack.config.js 用于配置用户自定义的webpack选项

  目前只是开放了少数配置，后期陆续增加用户可修改的范围，如果用户不配置这个文件，那么webpack会根据预设的配置进行打包

  • entry
  • output
    • publicPath
    • filename
    • path
    • libary
    • libaryTarget
  • plugins
    • html-webpack-plugin

const path = require('path')
module.exports = {
    entry: {
        index: './src/index.tsx',
        indexSimple: './src/index.simple.tsx'
    },
    plugins: [
        {
            plugin: 'html-webpack-plugin',
            option: {
                template: process.argv[2] == '--build' ? path.resolve(__dirname, './public/index.html') : path.resolve(__dirname, './public/indexMap.html'),
                title: '风控三期',
                chunks: ['index']
            }
        },
        {
            plugin:'html-webpack-plugin',
            option: {
                filename: 'user-action-report-component.html',
                template: path.resolve(__dirname, './public/index.simple.html'),
                title: '今日用车报告',
                chunks: ['indexSimple']
            }
        }
    ]
}

使用

在根目录的 package.json 中加入如下配置，然后执行。

"fch:start": "fch start",
"fch:build": "fch build"

更新记录

2021.5.11

• 增命令配置 -e

使用

fch start -e .env.xxx.developemnt
or
fch start -e .env.xxx.production

场景

用于解决同一个项目需要给不同公司使用,但是接口,系统ID,环境变量等的问题。

这样在Docker中执行不同的shell脚本命令区分系统。

• development 模式增加 cache配置，加速开发环境第二次构建

cache:{
    type: 'filesystem'
  },

2021.8.5

添加 fch install 功能用来更新现在的 Schematic 版本

路由生成方式更新

• fch.json文件可选择 router 的生成方式
• web 默认使用 微前端的路由生成方式
• h5 默认使用 懒加载的路由生成方式

也可选以下的生成方案

非懒加载生成方式

fch.json 添加

"router": {
  "type": "NOT_LAZYLOAD"
},

生成效果

import A from "~/solution/pages/home-component/home.component";

{
  path: `${MODULE_PATH}/home`,
  component: A,
  lazyload: false,
  exact: true
},

懒加载生成方式

fch.json 添加

"router": {
  "type": "LAZYLOAD"
},

生成效果

{
  path: `${MODULE_PATH}/home`,
  component: () => import('~/solution/pages/home-component/home.component')
  lazyload: true,
  exact: true
},

微前端生成方式

fch.json 添加

"router": {
  "type": "MIC"
}

生成效果

{
  path: `${MODULE_PATH}/home`,
  component: ROUTERS.home,
  lazyload: true,
  exact: true
},

home: () => import("~/solution/pages/home/home-component/home.component")

2021.9.2

• 去除重复webpack配置，unique保持配置唯一。

  https://www.npmjs.com/package/webpack-merge

使用方法

fch.webpack.js

    mergeCoustomConfig: 
        (unique) => ({
            customizeArray: unique(
                "plugins",
                ["HtmlWebpackPlugin"],
                (plugin) => plugin.constructor && plugin.constructor.name
              )
    }),