一、创建项目

 使用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. Create React App

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

  2. 深入 Create React App 核心概念

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

  3. tap news:week5 0.0 create react app

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

  4. 使用create react app教程

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

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

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

  6. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. 从零开始react实战:云书签-1 react环境搭建

    总览篇:react 实战之云书签 本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制 支持 l ...

  9. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  10. 02 基于umi搭建React快速开发框架(国际化)

    前言 之前写过一篇关于React的国际化文章,主要是用react-intl库,雅虎开源的.react-intl是用高阶组件包装一层来做国际化. 基于组件化会有一些问题,比如在一些工具方法中需要国际化, ...

随机推荐

  1. docker入门-学习笔记

    docker可以类比成window下的VMware或者virtualbox软件.docker有两个基本的概念:容器(container)和镜像(image),分别对应为VMware中的系统镜像和系统镜 ...

  2. 移动APP的自动化测试

    开发移动应用,最耗时耗力的就是手动测试APP的每个功能点或修复bug.有人就会提议App的业务逻辑可以使用nUnit或xUnit测试单元来辅助完成.那用户界面要如何测试?众所周知,移动设备多种多样,数 ...

  3. Class 实现IDisposing方法

    public class MyResourceHog : IDisposable  {   // 已经被处理过的标记   private bool _alreadyDisposed = false;  ...

  4. nsstring打印结构体

    // //  main.m //  09-常用结构体 // //  Created by apple on 14-3-20. //  Copyright (c) 2014年 apple. All ri ...

  5. deflate与gzip

    gzip是一种数据格式,默认且目前仅使用deflate算法压缩data部分: deflate是一种压缩算法,是huffman编码的一种加强. deflate与gzip解压的代码几乎相同,可以合成一块代 ...

  6. 解决js跨域问题

    如何解决js跨域问题 Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下 的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨 ...

  7. Android自定义shape的使用

    MainActivity如下: package cn.testshape; import android.os.Bundle; import android.app.Activity; /** * D ...

  8. 《修改代码的艺术》【PDF】下载

    <修改代码的艺术>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382309 内容简介 <修改代码的艺术>针对大型的. ...

  9. BZOJ 4361 isn | DP 树状数组

    链接 BZOJ 4361 题面 给出一个长度为n的序列A(A1,A2...AN).如果序列A不是非降的,你必须从中删去一个数, 这一操作,直到A非降为止.求有多少种不同的操作方案,答案模10^9+7. ...

  10. web应用下的安全问题以及tomcat/nginx对应解决方法(持续更新、亲测可解决问题)

    最近一券商那边扫描反馈了下面几个非业务型安全漏洞,要求解决,如下: XSS 自己写个脚本response的时候对特殊字符进行了处理,或者网上搜下一堆(不要忘了回车.换行). HTML form wit ...