项目根目录添加webpack.config.js并进行初始配置 代码语言:javascript 复制 // webpack.config.jsconst{resolve}=require("path");module.exports={// 组件库的起点入口entry:'./src/index.tsx',output:{filename:"r-ui.umd.js",// 打包后的文件名path:resolve(__dirname,'dist'),// 打包后的文件目录:...
引用antd的button组件 import * as React from 'react';+// 使用antd的Button和ButtonProps+// 为了不和我们的Button冲突,需要改导出名+import {Button as AntdButton, ButtonProps as AntdButtonProps} from 'antd';// 引入less样式 import './index.less';-interface ButtonProps {+interface ButtonProps exte...
2.3、配置 // 根目录新增craco.config.jsconstpath=require('path')module.exports={// webpack 配置webpack:{// 配置别名alias:{'@':path.resolve(__dirname,'src')},// 修改打包后的目录configure:(webpackConfig,{env,paths})=>{webpackConfig.output.path=path.resolve(__dirname,"dist")paths.a...
使用Vite+TS+Antd构建React项目 安装Vite1 2 3 npm install -g vite #yarn global add vite创建React项目 1 vite create my-react-app --template react-ts 安装React Router 1 2 npm install react-router-dom @types/react-router-dom #yarn add react-router-dom @types/react-router-dom...
引入antd组件库作为底层原子组件库,并且r-ui.umd.js和r-ui.umd.css包含antd组件代码和样式代码。 依赖的react、react-dom模块以外部引用方式。 开发与打包工具选型 使用webpack作为打包工具 老牌而又经典的打包工具,广泛的使用,丰富的插件生态以及各种易得的样例。
本文将按照以下结构来展开讨论react-ts-antd项目事例。具体包括以下几个部分: 1.引言:本部分将对本文的主题进行一个概述,介绍react-ts-antd项目的背景和目的,并简要阐述本文的结构。 2.正文:本部分是本文的主要内容,将详细介绍react-ts-antd项目的相关信息。具体分为以下几个小节: 2.1项目背景:本小节将介绍react-...
首先要安装 eslint,eslint 默认使用Espree进行解析,无法识别 ts 的一些语法,所以需要安装一个 ts 的解析器@typescript-eslint/parser,用它来代替默认的解析器,然后由@typescript-eslint/eslint-plugin来提供有关 ts 的规则补充。 由于是 react 项目,所以还需要插件eslint-plugin-react来支持.tsx。
React实战:使用Vite+TS+Antd构建React项目原创 修改于 2024-01-03 23:41:09 2.7K0 举报 文章被收录于专栏:码艺坊 前言 由于我之前学过React框架,但是由于工作中没有使用它,所以我最近开始使用了Vite、TypeScript、React Router,Redux,Axios,Ant Design和SpringBoot等流行技术来搭建了一个博客项目来巩固我的学习成...
│ │ └── types.ts │ └── utils #工具类 ├── tsconfig.json └── yarn.lock 目录 引言 第一章:项目创建、antd、less 第二章:路由拦截、路由嵌套 第三章:状态管理 Redux 第四章:网络请求、代理、mockjs 第五章:webpack配置 第六章:Eslint ...