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"
],
"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"