一、创建项目

 使用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. centos7下面 es7.5 搭建

    centos6 搭建 参考 https://www.cnblogs.com/php-linux/p/8758788.html 搭建linux虚拟机 https://www.cnblogs.com/ph ...

  2. go 结构体函数

    package main import "fmt" type Dog struct { Name string } func (d *Dog) speak() string { r ...

  3. centos8上使用gitosis管理git项目

    零,centos8平台如何安装gitosis服务? 参见:centos8平台安装gitosis服务 地址:https://www.cnblogs.com/architectforest/p/12456 ...

  4. 全文检索Solr集成HanLP中文分词【转】

    以前发布过HanLP的Lucene插件,后来很多人跟我说其实Solr更流行(反正我是觉得既然Solr是Lucene的子项目,那么稍微改改配置就能支持Solr),于是就抽空做了个Solr插件出来,开源在 ...

  5. 安卓WebSocket使用

    引入jar包: implementation "org.java-websocket:Java-WebSocket:1.4.0"implementation "org.s ...

  6. E. Almost Regular Bracket Sequence 解析(思維)

    Codeforce 1095 E. Almost Regular Bracket Sequence 解析(思維) 今天我們來看看CF1095E 題目連結 題目 給你一個括號序列,求有幾個字元改括號方向 ...

  7. 20200726_java爬虫_使用HttpClient模拟浏览器发送请求

    浏览器获取数据: 打开浏览器 ==> 输入网址 ==> 回车查询 ==> 返回结果 ==> 浏览器显示结果数据 HttpClient获取数据: 创建HttpClient ==& ...

  8. 容器探针(liveness and readiness probe)

    一.为什么需要容器探针 如何保持Pod健康   只要将pod调度到某个节点,Kubelet就会运行pod的容器,如果该pod的容器有一个或者所有的都终止运行(容器的主进程崩溃),Kubelet将重启容 ...

  9. jupyter IPthon常用命令

    Jupyter IPython 一.安装Anaconda 到官网下载Anaconda安装包 双击Anaconda3-5.0.0-Windows-x86_64.exe文件 会出现如下的页面 1. 点击i ...

  10. 水题挑战1:NOIP 2013 选择客栈

    丽江河边有\(n\) 家很有特色的客栈,客栈按照其位置顺序从 \(1\) 到 \(n\) 编号.每家客栈都按照某一种色调进行装饰(总共 \(k\) 种,用整数 \(0 \sim k-1\) 表示),且 ...