create-react-app + Typescript脚手架搭建

1、使用create-react-app 创建ts项目

yarn create react-app my-test-app --template typescrip

2、配置tsconfig.json

（1）在根目录下新建文件tsconfig.extend.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

（2）在tsconfig.json中新增

extends": "./tsconfig.extend.json"

（3）允许装饰器语法

"experimentalDecorators": true

3、安装依赖

（1）antd craco插件

yarn add antd @craco/craco craco-antd craco-less craco-alias

（2）在根目录下新建craco.config.js文件

const CracoAntDesignPlugin = require("craco-antd");
const CracoAlias = require("craco-alias");
const CracoLessPlugin = require("craco-less");
 
const path = require('path');
 
module.exports = {
  plugins: [
    /* antd组件按需加载&样式覆盖等 */
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: path.join(
          __dirname,
          "src/styles/antd.theme.less"
        ),
      },
    },
    /* 支持less module */
    {
      plugin: CracoLessPlugin,
      options: {
        cssLoaderOptions: {
          modules: { localIdentName: "[local]_[hash:base64:5]" },
        },
        modifyLessRule: function(lessRule, _context) {
          lessRule.test = /\.(module)\.(less)$/;
          lessRule.exclude = path.join(__dirname, 'node_modules');
          return lessRule;
        },
      },
    },
    /* 别名设置 */
    {
      plugin: CracoAlias,
      options: {
        source: "tsconfig",
        baseUrl: "./src",
        tsConfigPath: "./tsconfig.extend.json"
      }
    },
  ],
  devServer: (devServerConfig) => {
    return {
      ...devServerConfig,
      // 服务开启gzip
      compress: true,
      proxy: {
        '/api': {
          target: 'https://dolphin-test.cootekos.com/',
          changeOrigin: true,
          xfwd: false,
        }
      }
    }
  }
};

（3）创建 "src/styles/antd.theme.less" 覆盖原antd样式，具体看antd官网

（4）在react-app-env.d.ts文件中新增（否则将无法正常使用less module！！！）

 

/* 允许在ts中使用import styles from '*.less' */
declare module '*.less' {
  const styles: any;
  export = styles;
}

 

 

使用的时候还需要创建 index.module.less文件，如果有小伙伴可以直接引入index.less，下发留言