一、创建项目

 使用npx create-react-app (项目名) --template typescript  创建项目

  ①如果App.tsx文件有如下报错: (没有报错的请忽略)

需要将tsconfig.json文件里的 "jsx": "react-jsx" 配置改为 "jsx": "react" 即可。

② 此时运行yarn start会报错

此时需要将react-scripts版本4.0.0降级为3.4.4  (参考: https://stackoverflow.com/questions/64593336/typeerror-cannot-assign-to-read-only-property-paths-of-object-for-compileropt

③ 如遇到报错 : TypeScript 引入第三方包,报无法找到模块错误  (参考: https://www.cnblogs.com/xym4869/p/13323483.html)

二、安装ant-design 并配置自定义主题、按需加载(参考antd官网)、绝对路径的引用

yarn add antd @craco/craco craco-less
yarn add @babel/plugin-proposal-decorators babel-plugin-import --dev

①修改 package.json 里的 scripts 属性:

"scripts": {
"start": "set PORT=3000 && craco start",
"build": "set GENERATE_SOURCEMAP=false && craco build",
"test": "craco test"
},

② 在项目根目录创建一个 craco.config.js 用于修改默认配置 (参考: https://blog.csdn.net/qq_39223195/article/details/106287522

const CracoLessPlugin = require('craco-less');
const path = require('path') const pathResolve = pathUrl => path.join(__dirname, pathUrl) module.exports = {
webpack: {
alias: {
'@@': pathResolve('.'),
'@': pathResolve('src'),
'@common': pathResolve('src/common'),
'@config': pathResolve('src/config'),
'@components': pathResolve('src/components'),
}
},
babel: {
plugins: [
['import', { libraryName: 'antd', style: true }],
['@babel/plugin-proposal-decorators', { legacy: true }]
]
},
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': 'red' },
javascriptEnabled: true,
},
},
},
},
],
};

③在根目录创建 paths.json 文件

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

④修改tsconfig.json配置,添加上以下内容。将paths.json文件引入。直接在tsconfig.json文件里写会报错。 这样配置完之后引入文件的时候可以@/xxx/xxx并且会有提示。

"extends": "./paths.json",

⑤ 将App.css和index.css改为App.less和index.less

⑥ demo

三、代码规范(eslint)的配置 (参考: https://www.npmjs.com/package/eslint)

./node_modules/.bin/eslint --init

如果是windows系统需要将‘/’换成 ‘\’, 然后按照自己的需求来选择配置即可。

使用create-react-app 搭建react + ts + antd框架的更多相关文章

  1. 从零搭建react+ts组件库(封装antd)

    为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...

  2. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  3. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  4. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  5. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  6. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  7. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  8. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  9. SAAS云平台搭建札记: (四) AntD For React使用react-router-dom路由接收不同参数页面不刷新的问题

    在.net开发员眼里,如果使用MVC,根据路由匹配原则,可以通过各种方式接收参数,比如 /Post/List/1, /Post/List/2,或者 /Post/List?id=1,/Post/List ...

随机推荐

  1. VMware虚拟机中共享文件夹 开机启动

    输入命令: sudo /usr/bin/vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other -o uid=1000 -o gid=1000 -o umask=02 ...

  2. intellij idea:设置java方法注释模板(intellij idea 2019.2)

    一,打开方法注释模板的编辑窗口 菜单file->打开settings editor栏目下->打开Live Templates   说明:刘宏缔的架构森林是一个专注架构的博客,地址:http ...

  3. php中,posix_getpid() 和 getmypid() 有什么不同

    getmypid:windows 和 linux都可以用posix_getpid:仅linux可以用

  4. spring boot报错:Invalid bound statement (not found): com.

    经检查发现mapper的namespace没写全导致的 正确应该写成这样就可以了:

  5. Java中try()...catch()用法

    在stackoverflow偶尔看到的一个关于try()...catch()的用法,通常我们使用try...catch()捕获异常的,如果遇到类似IO流的处理,要在finally部分关闭IO流,当然这 ...

  6. 学习python须知,Python基础进阶需掌握哪些知识点?

    Python基础进阶需要掌握哪些知识点?Python将是每个程序员的标配,有编程基础再掌握Python语言对于日后的升职加薪更有利.Python语言简洁利于理解,语法上相对容易能够让开发者更专注于业务 ...

  7. Win32之进程创建过程

    0x01. 什么是进程? 进程提供程序所需要的资源,如:数据.代码等等 进程扮演的角色仅仅是为当前程序提供资源,或者代码,这就是进程所提供的,当时程序运行的状态和进程没有关系,进程可以看做空间的概念 ...

  8. mysql自动化建表脚本

    主脚本 配置文件 执行结果 主脚本内容 由于在awk中用常规方法无法转译单引号,所以用了单引号的八进制编码进行转译代替\047 等价于 ' [root@hadoop01 data]# cat crea ...

  9. Kubernetes Scheduler浅析

    概述 Kubernetes 调度器(Scheduler)是Kubernetes的核心组件:用户或者控制器创建Pod之后,调度器通过 kubernetes 的 watch 机制来发现集群中新创建且尚未被 ...

  10. Nginx跳转配置

    1.携带目录调转到后端,后端无目录,location配置如下 例子: i2.jusdacfj.com/ideas_edi/--10.0.2.137:7040/10.0.2.138:7040 locat ...