react-admin-boot

一个类似creat-react-app的脚手架, 用于快速搭建一个React + TypeScript项目，开箱即用。

特点:

• 统一项目结构
• 根据环境变量启用不同配置
• 支持自定义代理
• 支持 mock
• 支持单元测试
• 支持多页应用

项目结构

• src 源码目录
  • main.tsx 默认入口
• resources 资源和 yml 语法配置
  • application.yml 通用配置
  • application-dev.yml 特殊环境配置, 这里是dev环境
  • template.html 单页应用时的html模板
• mocks mock 配置文件夹
• static 静态文件, 打包时会将此目录完整拷贝
• config 覆盖配置
  • postcss.config.js 使用自定义postcss配置
  • webpack.config.js 重写webpack配置
• dist 默认输出目录

安装/使用

react-admin-boot同时也是一个cli命令, 可以全局安装。

所有命令参数都有全名和短名, 比如 -n 等同于 --name。使用--help查看更多用法

子命令:

• init 初始化项目
• start 开发项目
• build 编译项目
• test 测试项目

子命令也可查看help, 比如react-admin-boot start --help获取start子命令的帮助

# 全局安装
yarn global add react-admin-boot

# 查看用法
react-admin-boot --help

初始化项目

# 初始化项目, 会在当前目录创建 my-app 目录
react-admin-boot init my-app

# 指定项目名称和项目描述, 用于初始化package.json的对应字段
react-admin-boot init my-app -n app -d 一个app

开发

# 使用mock文件开发, 而不是走代理
react-admin-boot start --mock

# 指定开发端口(优先级最高, 也可以用配置文件进行配置)
react-admin-boot start --prot 8888

# 指定开发环境, 会加载对应的 `application-dev.yml` 配置
react-admin-boot start --env dev

编译

默认会编译输出在dist目录

# 使用pro环境编译
react-admin-boot build --env pro

# 查看编译后的代码分析
react-admin-boot build --analyzer

测试

默认测试会寻找tests,src, __tests__目录下的xx.spec.tsx文件, 自带css,scss, svg文件转换, 默认支持@/解析到/src.

可以在package.json中覆盖jest配置。

"jest": {
    "transformIgnorePatterns": [
        "<rootDir>/node_modules/(?!(utils-hooks))"
    ]
}

# 测试所有
react-admin-boot test

# 测试指定匹配的 describe 或 test 的名称
react-admin-boot test --test mytest

配置

配置文件可以不提供, 因为它们都存在默认值。 需要时候, 在resources文件夹提供application-xxx.yml的配置文件达到自定义配置的目的。

• application.yml 中的配置将被视为通用配置
• application-xxx.yml 指定环境的配置, xxx是自定环境的名称，比如默认开发是dev, 编译是pro

配置支持占位符 ${xxx}

下面演示目前所有支持的配置:

# webpack 配置
webpack:
    mode: development
    devtool: inline-source-map
    entry: ./src/main.tsx
    output:
        path: dist
        publicPath: /
        filename: js/[name].js
    devServer:
        port: 8080
        proxy:
            /wechat: http://192.168.1.211:8081
    externals:
        react: React
        react-dom: ReactDOM

# 环境变量
variable:
    NODE_ENV: development
    publicPath: ${webpack.output.publicPath}

# html模板文件标题
title: MyApp

自定义配置

想要自定义webpack配置, 创建如下文件config/webpack.config.js

/**
 * config webpack配置
 * devMode 是否是开发模式,(start命令启动)
 * cmd 命令行示例， 可以查看命令行参数, 比如 cmd.env 查看环境
 */
module.exports = (config, devMode, cmd) => {
    // 对webpack配置做一些自定义配置后, 返回你想要的配置
    return config;
};