当前位置: 首页 > 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 ✨…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...