使用create-react-app 搭建react + ts + antd框架
一、创建项目
使用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框架的更多相关文章
- 从零搭建react+ts组件库(封装antd)
为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- SAAS云平台搭建札记: (四) AntD For React使用react-router-dom路由接收不同参数页面不刷新的问题
在.net开发员眼里,如果使用MVC,根据路由匹配原则,可以通过各种方式接收参数,比如 /Post/List/1, /Post/List/2,或者 /Post/List?id=1,/Post/List ...
随机推荐
- VMware虚拟机中共享文件夹 开机启动
输入命令: sudo /usr/bin/vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other -o uid=1000 -o gid=1000 -o umask=02 ...
- intellij idea:设置java方法注释模板(intellij idea 2019.2)
一,打开方法注释模板的编辑窗口 菜单file->打开settings editor栏目下->打开Live Templates 说明:刘宏缔的架构森林是一个专注架构的博客,地址:http ...
- php中,posix_getpid() 和 getmypid() 有什么不同
getmypid:windows 和 linux都可以用posix_getpid:仅linux可以用
- spring boot报错:Invalid bound statement (not found): com.
经检查发现mapper的namespace没写全导致的 正确应该写成这样就可以了:
- Java中try()...catch()用法
在stackoverflow偶尔看到的一个关于try()...catch()的用法,通常我们使用try...catch()捕获异常的,如果遇到类似IO流的处理,要在finally部分关闭IO流,当然这 ...
- 学习python须知,Python基础进阶需掌握哪些知识点?
Python基础进阶需要掌握哪些知识点?Python将是每个程序员的标配,有编程基础再掌握Python语言对于日后的升职加薪更有利.Python语言简洁利于理解,语法上相对容易能够让开发者更专注于业务 ...
- Win32之进程创建过程
0x01. 什么是进程? 进程提供程序所需要的资源,如:数据.代码等等 进程扮演的角色仅仅是为当前程序提供资源,或者代码,这就是进程所提供的,当时程序运行的状态和进程没有关系,进程可以看做空间的概念 ...
- mysql自动化建表脚本
主脚本 配置文件 执行结果 主脚本内容 由于在awk中用常规方法无法转译单引号,所以用了单引号的八进制编码进行转译代替\047 等价于 ' [root@hadoop01 data]# cat crea ...
- Kubernetes Scheduler浅析
概述 Kubernetes 调度器(Scheduler)是Kubernetes的核心组件:用户或者控制器创建Pod之后,调度器通过 kubernetes 的 watch 机制来发现集群中新创建且尚未被 ...
- Nginx跳转配置
1.携带目录调转到后端,后端无目录,location配置如下 例子: i2.jusdacfj.com/ideas_edi/--10.0.2.137:7040/10.0.2.138:7040 locat ...