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

使用webpack建立React+TS项目

news 2026/2/9 18:51:57

之前写过类似的文章，这次看到一本新书里也介绍了这个知识点，故尝试之。

Refer: 《Learn React With TypeScript - A Beginner's Guide To Reactive Web Development With React 18 and TypeScript》chapter3 Creating a project with webpack

1.先建立一个空的文件夹，my-app，并用vscode打开然后到根目录底下创建package.json和src目录，并在其中添加index.html:

{"name": "my-app","version": "1.0.0","description": "My React and TypeScript app"
}

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>My app</title>
</head>
<body><div id="root"></div>
</body>
</html>

2.安装和配置ts:

npm install -D typescript

 根目录新建tsconfig.json文件:

{"compilerOptions": {"noEmit": true,"lib": ["dom", "dom.iterable", "esnext"],"moduleResolution": "node","allowSyntheticDefaultImports": true,"esModuleInterop": true,"jsx": "react","forceConsistentCasingInFileNames": true,"strict": true},"include": ["src"],"exclude": ["node_modules", "dist"]
}

3.安装React:

npm install react react-dom

安装类型(react包本身不含类型):

 npm install @types/react @types/react-dom

4.在src目录地下创建index.tsx:

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";const root = createRoot(document.getElementById("root") as HTMLElement);function App() {return <h1>My React and TypeScript App!</h1>;
}root.render(<StrictMode><App /></StrictMode>
);

5.安装Babel:

npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime

根目录创建.babelrc.json:

{"presets": ["@babel/preset-env","@babel/preset-react","@babel/preset-typescript"],"plugins": [["@babel/plugin-transform-runtime",{"regenerator": true}]]
}

6.安装webpack

 npm i -D webpack webpack-cli webpack-dev-server babel-loader html-webpack-plugin

7.配置webpack

a.安装node-ts库允许在ts文件中配置: 

npm i -D ts-node

b.根目录上创建一个文件webpack.dev.config.ts:

import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import {Configuration as WebpackConfig,HotModuleReplacementPlugin,
} from "webpack";
import { Configuration as WebpackDevServerConfig } from "webpack-dev-server";type Configuration = WebpackConfig & {devServer?: WebpackDevServerConfig;
};const config: Configuration = {mode: "development",output: {publicPath: "/",},entry: "./src/index.tsx",module: {rules: [{test: /\.(ts|js)x?$/i,exclude: /node_modules/,use: {loader: "babel-loader",options: {presets: ["@babel/preset-env","@babel/preset-react","@babel/preset-typescript",],},},},],},resolve: {extensions: [".tsx", ".ts", ".js"],},plugins: [new HtmlWebpackPlugin({template: "src/index.html",}),new HotModuleReplacementPlugin(),],devtool: "inline-source-map",devServer: {static: path.join(__dirname, "dist"),historyApiFallback: true,port: 4000,open: true,hot: true,},
};export default config;

c.在package.json中追加启动脚本:

,"scripts": {"start": "webpack serve --config webpack.dev.config.ts"}

8.允许app，命令行使用:

npm start

运行结果:

 源码

相关文章：

使用webpack建立React+TS项目

之前写过类似的文章&#xff0c;这次看到一本新书里也介绍了这个知识点&#xff0c;故尝试之。 Refer: 《Learn React With TypeScript - A Beginners Guide To Reactive Web Development With React 18 and TypeScript》chapter3 Creating a project with webpack 1.先建立一…...

编程日记 2023/8/11 1:01:14

法律监督大数据平台有什么作用？

大数据赋能时代法律监督&#xff0c;构建法律行业领域大数据监督模型。法律监督大数据研判系统助力检察机关以社会公正为核心价值追求&#xff0c;对执法不严、司法不公“零容忍”&#xff0c;强化对诉讼活动的法律监督&#xff0c;坚决维护法律尊严&#xff0c;坚决捍卫公平正…...

编程日记 2023/8/11 1:00:11

根据制定的长度切割list值

88、根据制定的长度切割list值 依赖&#xff0c;谷歌开源的工具类库&#xff0c;非常的强大 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>29.0-jre</version> </dependency>其…...

编程日记 2023/8/11 0:59:10

AES加密(1)：AES基础知识和计算过程

从产品代码的安全角度考虑&#xff0c;我们需要对代码、数据进行加密。加密的算法有很多种&#xff0c;基于速度考虑&#xff0c;我们一般使用对称加密算法&#xff0c;其中有一种常见的对称加密算法&#xff1a;AES(Advanced Encryption Standard)。在一些高端的MCU&#xff0…...

编程日记 2023/8/11 0:58:09

Nginx启动报错- Failed to start The nginx HTTP and reverse proxy server

根据日志&#xff0c;仍然出现 “bind() to 0.0.0.0:8888 failed (13: Permission denied)” 错误。这意味着 Nginx 仍然无法绑定到 8888 端口&#xff0c;即使使用 root 权限。 请执行以下操作来进一步排查问题&#xff1a; 确保没有其他进程占用 8888 端口&#xff1a;使用以…...

编程日记 2023/8/11 0:57:08

五、web应用程序技术——web功能

文章目录 一、服务器端功能1.1 SQL1.2 XML1.3 web服务 二、客户端功能2.1 HTML2.2 超链接2.3 表单2.4 CSS2.5 JavaScript2.6 文档对象模型2.7 Ajax2.8 JSON2.9 同源策略2.10浏览器拓展技术 一、服务器端功能 早期的web站点由各种静态资源组成&#xff0c;如HTML页面与图片。当用…...

编程日记 2023/8/11 0:56:07

AutoDL服务器的镜像版本太高，配置python3.7 tensorflow1.15版本的框架的步骤

1.选择一个实例&#xff0c;进入后端界面 2. 更新bashrc中的环境变量 conda init bash && source /root/.bashrc查看虚拟环境 conda info --envs可以看到此时有一个base的虚拟环境 但是它的python版本为3.8.10&#xff0c;无法安装tensorflow1.15,所以我们要创建一个…...

编程日记 2023/8/11 0:55:05

c++ boost库之scoped_ptr,shared_ptr,weak_ptr智能指针

头文件: #include <boost/smart_ptr.hpp> #include <boost/make_shared.hpp> #include <boost/shared_ptr.hpp> 1. scoped_ptr & scoped_array 只能在本作用域内使用,不希望被转让; 效率等同原始指针; scoped_ptr<string> sp(new string("t…...

编程日记 2023/8/11 0:54:03

【leetcode】383. 赎金信(easy)

给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 class Solution {public boolea…...

编程日记 2023/8/11 0:53:02

CTF-记一次PWN练习

PWN是一个黑客语法的俚语词&#xff0c;自"own"这个字引申出来的&#xff0c;这个词的含意在于&#xff0c;玩家在整个游戏对战中处在胜利的优势&#xff0c;或是说明竞争对手处在完全惨败的情形下&#xff0c;这个词习惯上在网络游戏文化主要用于嘲笑竞争对手在整个…...

编程日记 2023/8/11 0:52:01

《golang设计模式》第一部分·创建型模式-04-工厂方法模式（Factory Method）

文章目录 1 概述2.1 角色2.2 类图 2 代码示例2. 1 设计2.2 代码2.3 类图 3. 简单工厂3.1 角色3.2 类图3.3 代码示例3.3.1 设计3.3.2 代码3.3.3 类图 1 概述 工厂方法类定义产品对象创建接口&#xff0c;但由子类实现具体产品对象的创建。 2.1 角色 Product&#xff08;抽象产…...

编程日记 2023/8/11 0:51:00

redis的配置和使用、redis的数据结构以及缓存遇见的常见问题

目录 1.缓存 2.redis不仅仅可以做缓存&#xff0c;只不过说他的大部分场景&#xff0c;是做缓存。本地缓存重启后缓存里的东西就没有了&#xff0c;但是redis有。 3.redis有几个特性:查询快&#xff0c;但是是放到内存里的〈断电或者重启&#xff0c;数据就丢了)&#xff0c…...

编程日记 2023/8/11 0:49:58

在Ubuntu系统下修改limits.conf不生效

文章目录 前言尝试过程总结 前言 最近遇到的一个问题&#xff0c;在Ubuntu系统下修改/etc/security/limits.conf不生效&#xff0c;查了多种资料都说不用重启&#xff0c;但是我改完就是不生效&#xff0c;多次尝试之后发现Ubuntu系统有毒。 尝试过程 通过 ulimit -n 命令可…...

编程日记 2023/8/11 0:48:57

selenium 选项 chrome_options

当前环境&#xff1a; Windows 10 Python 3.7 selenium 3.141.0 Google Chrome 115.0.5790.110 &#xff08;64 位&#xff09; 一种方法&#xff1a; from selenium import webdriverif __name__ __main__:# chrome 选项配置chrome_options webdriver.ChromeOptions(…...

编程日记 2023/8/11 0:47:56

自然语言处理（Natural Language Processing，NLP）

自然语言处理(Natural Language Processing&#xff0c;NLP)是人工智能领域的一个重要分支&#xff0c;旨在使计算机能够理解、处理和生成人类自然语言。NLP 的目标是让计算机能够像人类一样有效地理解和交流&#xff0c;从而实现更自然、更智能的人机交互。 NLP的理解概括&…...

编程日记 2023/8/11 0:46:55

基于机器学习的库存需求预测 -- 机器学习项目基础篇（12）

在本文中&#xff0c;我们将尝试实现一个机器学习模型&#xff0c;该模型可以预测在不同商店销售的不同产品的库存量。 导入库和数据集 Python库使我们可以轻松地处理数据&#xff0c;并通过一行代码执行典型和复杂的任务。 Pandas -此库有助于以2D阵列格式加载数据帧&#…...

编程日记 2023/8/11 0:45:54

【D3S】集成smart-doc并同步配置到Torna

目录 一、引言二、maven插件三、smart-doc.json配置四、smart-doc-maven-plugin相关命令五、推送文档到Torna六、通过Maven Profile简化构建 一、引言 D3S&#xff08;DDD with SpringBoot&#xff09;为本作者使用DDD过程中开发的框架&#xff0c;目前已可公开查看源码&#…...

编程日记 2023/8/11 0:44:53

网络安全设备及部署

什么是等保定级&#xff1f; 之前了解了下等保定级&#xff0c;接下里做更加深入的探讨 文章目录 一、网路安全大事件1.1 震网病毒1.2 海康威视弱口令1.3 物联网Mirai病毒1.4 专网 黑天安 事件1.5 乌克兰停电1.6 委内瑞拉电网1.7 棱镜门事件1.8 熊猫烧香 二、法律法规解读三、安…...

编程日记 2023/8/11 0:43:52

LVS集群

目录 1、lvs简介&#xff1a; 2、lvs架构图&#xff1a; 3、 lvs的工作模式&#xff1a; 1&#xff09; VS/NAT&#xff1a; 即&#xff08;Virtual Server via Network Address Translation&#xff09; 2&#xff09;VS/TUN &#xff1a;即&#xff08;Virtual Server v…...

编程日记 2023/8/11 0:42:51

Kubernetes(K8s)从入门到精通系列之十二：安装和设置 kubectl

Kubernetes K8s从入门到精通系列之十二&#xff1a;安装和设置 kubectl 一、kubectl二、在 Linux 系统中安装并设置 kubectl1.准备工作2.用 curl 在 Linux 系统中安装 kubectl3.用原生包管理工具安装 三、验证 kubectl 配置四、kubectl 的可选配置和插件1.启用 shell 自动补全功…...

编程日记 2023/8/11 0:41:50

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/2/9 13:51:46

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/2/1 21:17:19

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

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

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

编程新知 2025/11/30 10:30:15

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2026/2/1 4:14:14

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38