React 大屏脚手架

1. 使用 create-react-app 初始化

# 使用了 create-react-app 的 typescript 模板
yarn create react-app my-big-screen --template typescript

# 初始化之后进入 my-big-screen 文件目录下执行
yarn start 

# localhost:3000 就能看到 react 的 hello 页面了

2. 引入 antd UI库

# 在 根目录 下
yarn add antd

3. 使用 craco 插件来自定义配置

1. 安装 craco

yarn add @craco/craco

2. 修改 package.json 文件如下

   # 原本
   "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject"
     }
   
   # 修改之后
   "scripts": {
       "start": "craco start",
       "build": "craco build",
       "test": "craco test",
       "eject": "craco eject"
     }
   

3. 在根目录添加 craco.config.js 文件

   module.exports = {}
   

4. 自定义 antd 主题，使用 less 作为 css 预处理器

1. 安装 craco-antd

yarn add craco-antd

2. 修改 craco.config.js 文件

   const CracoAntDesignPlugin = require('craco-antd');
   
   module.exports = {
     plugins: [
       {
         plugin: CracoAntDesignPlugin,
         options: {
           customizeTheme: {
             '@primary-color': '#1DA57A',
           },
         },
       },
     ],
   };
   

5. 使用 craco-less .module.less 来模拟vue组件中style 的 scope 功能

1. craco-less 依赖 已经内置在 @craco/craco 依赖中，无需主动安装

2. 配置 craco.config.js 文件

   const CracoAntDesignPlugin = require('craco-antd')
   const CracoLessPlugin = require('craco-less')
   const { loaderByName } = require('@craco/craco')
   
   module.exports = {
    plugins: [
        {
            plugin: CracoAntDesignPlugin,
            options: {
                customizeTheme: {
                    '@primary-color': '#1DA57A'
                }
            }
        },
        {
            plugin: CracoLessPlugin,
            options: {
                modifyLessRule(lessRule, context) {
                    // You have to exclude these file suffixes first,
                    // if you want to modify the less module's suffix
                    lessRule.exclude = //.m/.less$/
                    return lessRule
                },
                modifyLessModuleRule(lessModuleRule, context) {
                    // Configure the file suffix
                    lessModuleRule.test = //.m/.less$/
   
                    // Configure the generated local ident name.
                    const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'))
                    cssLoader.options.modules = {
                        localIdentName: '[local]_[hash:base64:5]'
                    }
   
                    return lessModuleRule
                }
            }
        }
    ]
   }
   
   

3. 配置 * ./src/react-app-env.d.ts * 文件

   /// 
   
   // 定义在 全局的 变量 然后就可以 window.* 进行访问了
   interface Window {
     __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any
     AMap: any
   }
   
   declare module "*.module.less" {
     const classes: { readonly [key: string]: string };
     export default classes;
   }
   

4. 使用示例(类似vue scope 的效果)

   # index.module.less 文件命名
   app {
       font-size: 40px;
       color: #f00;
   }
   

   # 在组件中引入
   import styles from './index.module.less'
   
   hello
   

6. 使用 ESLint Prettier 两个插件来做代码格式校验和自动格式化

7. 以上操作版本记录

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.8",
    "@typescript-eslint/eslint-plugin": "^4.30.0",
    "@typescript-eslint/parser": "^4.30.0",
    "antd": "^4.16.13",
    "craco-antd": "^1.19.0",
    "eslint": "^7.32.0",
    "eslint-config-alloy": "^4.3.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.25.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.1",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "set PORT=3090 && craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject",
    "lint": "eslint '{src}/**/*.{ts,tsx,js,jsx}'",
    "lint_fix": "eslint {src} --ext .ts,.tsx,.js,jsx --fix"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}