# testcliz > ## 起步 Latest version **1.0.4** (published 2022-06-14) · ISC license · 0 weekly downloads ## Install ```sh npm install testcliz pnpm add testcliz yarn add testcliz bun add testcliz ``` Provides the command `fch2`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.4 | | Published | 2022-06-14 | | First published | 2022-06-14 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 52 | | Unpacked size | 856.7 KB | | Known vulnerabilities | 0 (+6 in 1 direct dependencies) | | Install scripts | no | | Author | ernest | | Maintainers | zqii | ## Links - npm: https://www.npmjs.com/package/testcliz - npm.io page: https://npm.io/package/testcliz ## Dependencies (52) - [del](https://npm.io/package/del.md) ^5.1.0 - [ora](https://npm.io/package/ora.md) ^4.0.3 - [less](https://npm.io/package/less.md) ^4.1.0 - [chalk](https://npm.io/package/chalk.md) ^3.0.0 - [dotenv](https://npm.io/package/dotenv.md) ^8.2.0 - [eslint](https://npm.io/package/eslint.md) ^6.4.0 - [figlet](https://npm.io/package/figlet.md) ^1.4.0 - [express](https://npm.io/package/express.md) ^4.17.1 - [webpack](https://npm.io/package/webpack.md) ^5.15.0 - [inquirer](https://npm.io/package/inquirer.md) ^7.0.0 - [prettier](https://npm.io/package/prettier.md) ^2.2.1 - [commander](https://npm.io/package/commander.md) ^4.0.1 - [cross-env](https://npm.io/package/cross-env.md) ^7.0.3 - [ts-loader](https://npm.io/package/ts-loader.md) ^8.0.14 - [css-loader](https://npm.io/package/css-loader.md) ^5.0.1 - [node-emoji](https://npm.io/package/node-emoji.md) ^1.10.0 - [typescript](https://npm.io/package/typescript.md) ^3.7.5 - [url-loader](https://npm.io/package/url-loader.md) ^4.1.1 - [file-loader](https://npm.io/package/file-loader.md) ^6.2.0 - [js-beautify](https://npm.io/package/js-beautify.md) ^1.7.5 - [less-loader](https://npm.io/package/less-loader.md) ^6.1.0 - [lint-staged](https://npm.io/package/lint-staged.md) ^10.5.3 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.3.1 - [autoprefixer](https://npm.io/package/autoprefixer.md) 8.0.0 - [style-loader](https://npm.io/package/style-loader.md) ^2.0.0 - [@types/figlet](https://npm.io/package/@types/figlet.md) ^1.2.0 - [eslint-loader](https://npm.io/package/eslint-loader.md) ^3.0.0 - [webpack-chain](https://npm.io/package/webpack-chain.md) ^6.5.1 - [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.7.3 - [@fep/react-web](https://npm.io/package/@fep/react-web.md) ^1.0.4 - [dotenv-webpack](https://npm.io/package/dotenv-webpack.md) ^6.0.0 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^5.2.0 - [wenborntemplate](https://npm.io/package/wenborntemplate.md) ^0.0.1 - [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^4.13.0 - [ts-import-plugin](https://npm.io/package/ts-import-plugin.md) ^1.6.7 - [webpack-cdn-plugin](https://npm.io/package/webpack-cdn-plugin.md) ^3.3.1 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.11.2 - [@darkobits/lolcatjs](https://npm.io/package/@darkobits/lolcatjs.md) 3.1.3 - [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^7.0.0 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 5.2.0 - [@angular-devkit/core](https://npm.io/package/@angular-devkit/core.md) ^10.0.4 - [postcss-px2rem-exclude](https://npm.io/package/postcss-px2rem-exclude.md) ^0.0.6 - [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) ^6.1.2 - [@fep/react-web-material](https://npm.io/package/@fep/react-web-material.md) 1.0.2 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^1.3.4 - [@angular-devkit/schematics](https://npm.io/package/@angular-devkit/schematics.md) 10.0.4 - [progress-bar-webpack-plugin](https://npm.io/package/progress-bar-webpack-plugin.md) ^2.1.0 - [speed-measure-webpack-plugin](https://npm.io/package/speed-measure-webpack-plugin.md) ^1.3.3 - [add-asset-html-webpack-plugin](https://npm.io/package/add-asset-html-webpack-plugin.md) ^3.1.3 - [@angular-devkit/schematics-cli](https://npm.io/package/@angular-devkit/schematics-cli.md) 0.1000.4 - [friendly-errors-webpack-plugin](https://npm.io/package/friendly-errors-webpack-plugin.md) ^1.7.0 - [@teamsupercell/typings-for-css-modules-loader](https://npm.io/package/@teamsupercell/typings-for-css-modules-loader.md) ^2.4.0 ## Recent versions - 1.0.4 (latest) — 2022-06-14 - 1.0.3 — 2022-06-14 - 1.0.2 — 2022-06-14 - 1.0.1 — 2022-06-14 - 1.0.0 — 2022-06-14 ## README # fch-cli ## 起步 ### 安装 ```bash npm i -g @fch/fch-cli ``` ### 创建新项目 ```bash fch new|n [options] [name] ``` fch.json 务必保证当前的project是有的 ```json { "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. ```bash fch new my-project 可选h5 和 web # OR fch n my-project ``` ## 使用 ### 快速生成文件至当前目录 ```bash fch generate|g [name] ``` schematic 可选参数 - `c`: 生成hooks组件 ```bash fch g c ``` - `rc`: 生成带有reducer的组件 ```bash fch g rc ``` - `s`: 生成请求的service文件 ```bash fch g s ``` - `d`: 生成相应dto文件 ```bash fch g d ``` - `m`: 生成相应module模板文件 ```bash fch g m ``` - `table`: 生成相应component table模板文件 ```bash fch g table ``` - `modal`: 生成相应modal模板文件 ```bash fch g modal ``` ### webpack功能 #### 配置 在使用webpack打包构建功能的时候必须保证项目根目录中包含`fch.json`和`fch.webpack.config.js` ,两个配置文件文件以及环境变量配置文件。 ![image-20210325152650309](https://leanr.oss-cn-beijing.aliyuncs.com/img//image-20210325152650309.png) * fch.json 中的 `type` 属性用于区分打包目标为 `web ` 还是 `h5` * fch.webpack.config.js 用于配置用户自定义的webpack选项 > 目前只是开放了少数配置，后期陆续增加用户可修改的范围，如果用户不配置这个文件，那么webpack会根据预设的配置进行打包 * entry * output * publicPath * filename * path * libary * libaryTarget * plugins * html-webpack-plugin ```js 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` **使用** ```shell fch start -e .env.xxx.developemnt or fch start -e .env.xxx.production ``` **场景** 用于解决同一个项目需要给不同公司使用,但是接口,系统ID,环境变量等的问题。 这样在Docker中执行不同的shell脚本命令区分系统。 * `development` 模式增加 cache配置，加速开发环境第二次构建 ```js 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 ```js mergeCoustomConfig: (unique) => ({ customizeArray: unique( "plugins", ["HtmlWebpackPlugin"], (plugin) => plugin.constructor && plugin.constructor.name ) }), ``` --- _Source: https://npm.io/package/testcliz · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._