当前位置: 首页 > news >正文

React +ts + babel+webpack

babel 

@babel/preset-typescript 专门处理ts

"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",

ts


"@types/react": "^18.0.15",
"@types/react-dom": "^18.2.11",
"@types/react-redux": "^7.1.27",
"typescript": "^4.8.2"

webpack z增加tsx解析

babel.config.json 增加@babel/preset-typescript

{"presets": ["@babel/preset-env","@babel/preset-react","@babel/preset-typescript"]
}

package.json

{"name": "my-frame","version": "0.0.1","private": true,"homepage": "./","devDependencies": {"@babel/cli": "^7.17.6","@babel/core": "^7.17.8","@babel/preset-env": "^7.16.11","@babel/preset-react": "^7.16.7","@babel/preset-typescript": "^7.16.7","@types/react": "^18.0.15","@types/react-dom": "^18.2.11","@types/react-redux": "^7.1.27","babel-loader": "^8.2.4","css-loader": "^6.7.1","css-minimizer-webpack-plugin": "^4.0.0","file-loader": "^6.2.0","html-webpack-plugin": "^5.5.0","less-loader": "^10.2.0","mini-css-extract-plugin": "^2.6.0","pnp-webpack-plugin": "^1.7.0","postcss-flexbugs-fixes": "^5.0.2","postcss-loader": "^6.2.1","postcss-normalize": "^10.0.1","postcss-preset-env": "^7.4.3","postcss-safe-parser": "^6.0.0","resolve-url-loader": "^5.0.0","sass": "^1.49.9","sass-loader": "^12.6.0","sass-resources-loader": "^2.2.4","style-loader": "^3.3.1","terser-webpack-plugin": "^5.3.1","url-loader": "^4.1.1","webpack": "^5.70.0","webpack-bundle-analyzer": "^4.5.0","webpack-cli": "^4.10.0","webpack-dev-server": "^4.7.4","webpack-manifest-plugin": "^5.0.0","webpackbar": "^5.0.2","workbox-webpack-plugin": "^6.5.2"},"dependencies": {"core-js": "^3.21.1","moment": "^2.29.1","react": "^18.2.0","react-dom": "^18.2.0","react-router": "^6.3.0","react-router-dom": "^6.3.0","typescript": "^4.8.2"},"scripts": {"start": "webpack server --mode=development","build": "npm run clean && webpack --mode=production","clean": "rimraf build/*"},"browserslist": [">0.2%","not dead","not ie <= 11","not op_mini all"],"eslintConfig": {"extends": "react-app"}
}

相关文章:

React +ts + babel+webpack

babel babel/preset-typescript 专门处理ts "babel/cli": "^7.17.6", "babel/core": "^7.17.8", "babel/preset-env": "^7.16.11", "babel/preset-react": "^7.16.7", "babel/preset…...

红队专题-REVERSE二进制逆向反编译

红队专题 招募六边形战士队员IDA pro安装python2加入环境变量py2安装pip安装IDA 7.0 proIDAPython: importing "site" failed. 招募六边形战士队员 一起学习 代码审计、安全开发、web攻防、逆向等。。。 私信联系 IDA pro 安装python2 python-2.7.3.msi 加入环…...

Spring技术原理之Bean生命周期原理解析

Spring技术原理之Bean生命周期原理解析 Spring作为Java领域中的优秀框架&#xff0c;其核心功能之一是依赖注入和生命周期管理。其中&#xff0c;Bean的生命周期管理是Spring框架中一个重要的概念。在本篇文章中&#xff0c;我们将深入探讨Spring技术原理中的Bean生命周期原理…...

Unity实现设计模式——模板方法模式

Unity实现设计模式——模板方法模式 模板模式(Template Pattern)&#xff0c; 指在一个抽象类公开定义了执行它的方法的模板。它的子类可以按需要重写方法实现&#xff0c;但调用将以抽象类中定义的方式进行。 简单说&#xff0c; 模板方法模式定义一个操作中的算法的骨架&…...

C++实现高性能内存池(二)

文章目录 一、设计内存池二、实现MemoryPool::construct() 实现MemoryPool::deallocate() 实现MemoryPool::~MemoryPool() 实现MemoryPool::allocate() 实现三、与 std::vector 的性能对比一、设计内存池 在上节中,我们在模板链表栈中使用了默认构造器来管理栈操作中的元素内…...

沪深300期权一个点多少钱?

经中国证监会批准&#xff0c;深圳证券交易所于2019年12月23日上市嘉实沪深300ETF期权合约品种。该产品是以沪深300为标的物的嘉实沪深300ETF交易型指数基金为标的衍生的标准化合约&#xff0c;下文介绍沪深300期权一个点多少钱?本文来自&#xff1a;期权酱 一、沪深300期权涨…...

怎么防止重要文件夹丢失?文件夹安全如何保护?

我们在使用电脑的过程中&#xff0c;会将重要数据放在文件夹中&#xff0c;那么&#xff0c;我们该怎么防止重要文件夹丢失呢&#xff1f;下面我们就一起来了解一下。 EFS加密 EFS加密可以对于NTFS卷上的文件夹进行加密&#xff0c;加密后的文件夹将只允许加密时登录系统的用户…...

用于物体识别和跟踪的下游任务自监督学习-1-引言

一&#xff1a;引言&#xff1a; 图像和视频理解是计算机视觉应用中的基本问题&#xff0c;旨在使机器能够像人类一样解释和理解视觉数据。这些问题涉及识别图像和视频中的对象、人物、动作、事件和场景。如图1.1-&#xff08;a&#xff09;所示的图像识别任务包括对象检测[1]…...

式子表达ds类——多用位置/值域表示未知数+区间覆盖转区间加:CF407E

https://www.luogu.com.cn/problem/CF407E 多用位置/值域表示未知数 推出的式子中 n n n 表示长度&#xff0c;应该直接换成 r − l 1 r-l1 r−l1 区间覆盖转区间加 推出的式子有 m x , m n mx,mn mx,mn&#xff0c;朴素思路是用单调队列区间覆盖维护 那样就不能很方便…...

Python 实现秒表功能(比较好玩的题目)

以下实例使用 time 模块来实现秒表功能&#xff1a; import time print(按下回车开始计时&#xff0c;按下ctrlc停止计时) while True:input("")starttimetime.time()print(开始)try:while True:print(计时&#xff1a;,round(time.time()-starttime,0),秒)time.sle…...

DALL-E 3调参教程;百度新出的AI写小说神器;通义听悟看播客也太爽了;系列博文带你理解生成式AI | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f525; 2023年诺贝尔奖全部揭晓&#xff0c;一文看完6类奖项花落谁家 https://www.nobelprize.org/prizes 随着最后一项「经济学奖」的揭秘&a…...

设计模式-享元模式

概念 共享内存&#xff08;主要考虑内存&#xff0c;而非效率&#xff09;相同的数据&#xff0c;共享使用&#xff08;JS中未找到经典应用场景&#xff09; 演示 <!-- 无限下拉列表&#xff0c;将事件代理到高层节点上 --> <!-- 如果都绑定到<a>标签&#x…...

中秋时节赏明月,五子棋戏月饼趣 — Flutter中秋限定版五子棋

前言 当中秋时节来临&#xff0c;我们都期待着与亲人朋友共度这个美好的节日。这个时候&#xff0c;除了传统的赏月和品尝美味的月饼&#xff0c;我还有一个特别的建议——尝试一款有趣的Flutter五子棋游戏&#xff01;这款五子棋游戏以中秋为主题&#xff0c;游戏的棋子也可爱…...

Scala第十九章节

Scala第十九章节 scala总目录 文档资料下载 章节目标 了解Actor的相关概述掌握Actor发送和接收消息掌握WordCount案例 1. Actor介绍 Scala中的Actor并发编程模型可以用来开发比Java线程效率更高的并发程序。我们学习Scala Actor的目的主要是为后续学习Akka做准备。 1.1 Ja…...

kafka与hbase的区别

Kafka 和 HBase 是两个不同的分布式数据存储系统&#xff0c;它们可以在大数据应用中发挥不同的作用。 Kafka 是一个高吞吐量的分布式发布订阅消息系统&#xff0c;主要用于处理实时数据流。它具有以下特点&#xff1a; 高性能&#xff1a;Kafka 能够以非常高的吞吐量和低延迟…...

出栈序列的合法性

给定一个最大容量为 M 的堆栈&#xff0c;将 N 个数字按 1, 2, 3, ..., N 的顺序入栈&#xff0c;允许按任何顺序出栈&#xff0c;则哪些数字序列是不可能得到的&#xff1f;例如给定 M5、N7&#xff0c;则我们有可能得到{ 1, 2, 3, 4, 5, 6, 7 }&#xff0c;但不可能得到{ 3, …...

unity操作_刚体 c#

刚体Rigidbody 首先在场景中创建一个Plane 位置重置一下 再创建一个Cube 充值 y0.5 我们可以看出创建的Cube 和 Plane都自带碰撞器 Plane用的是网格碰撞器 我们可以通过网格世界看到不同的网格碰撞器 发生碰撞&#xff08;条件&#xff09;&#xff1a; 两个物体都有碰撞器 …...

网络编程中套接字(socket)介绍(Python示例)

网络编程中套接字&#xff08;socket&#xff09;介绍&#xff08;Python示例&#xff09; 网络编程就是同一计算机的进程间或者不同的联网计算机之间的通信&#xff08;交换数据&#xff09;。 那么&#xff0c;这两台计算机之间用什么传输数据呢&#xff1f;首先你肯定先需要…...

d3dcompiler_43.dll是什么文件?缺失d3dcompiler_43.dll文件修复与解决方法

今天我要和大家分享的是关于d3dcompiler_43.dll丢失的解决方法。我相信很多网友在使用电脑时都遇到过这个问题&#xff0c;那么接下来就让我们一起来探讨一下如何解决这个问题吧&#xff01; 首先&#xff0c;让我们来了解一下d3dcompiler_43.dll文件的总体介绍。d3dcompiler_…...

YOLOv7改进:SPD-Conv,低分辨率图像和小物体涨点明显,涨点神器!!!

💡💡💡本文属于原创独家改进:SPD-Conv,优势:处理低分辨率图像和小物体等更困难的任务时性能更优 SPD-Conv | 亲测在多个数据集实现暴力涨点,尤其是小物体检测你值得拥有,强烈推荐,独家首发; 收录: YOLOv7高阶自研专栏介绍: http://t.csdnimg.cn/tYI0c ✨…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...

Appium下载安装配置保姆教程(图文详解)

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

【题解-洛谷】P10480 可达性统计

题目&#xff1a;P10480 可达性统计 题目描述 给定一张 N N N 个点 M M M 条边的有向无环图&#xff0c;分别统计从每个点出发能够到达的点的数量。 输入格式 第一行两个整数 N , M N,M N,M&#xff0c;接下来 M M M 行每行两个整数 x , y x,y x,y&#xff0c;表示从 …...