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

使用webpack建立React+TS项目

news 2025/11/6 4:31:46

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

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/11/5 9:28:29

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/10/23 17:46:23

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/11/1 0:26:11

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/11/3 4:47:37

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/11/4 13:40:14

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/8/4 22:42:24

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2025/11/2 11:07:47

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/10/25 23:25:23

微服务通信安全：深入解析mTLS的原理与实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言&#xff1a;微服务时代的通信安全挑战 随着云原生和微服务架构的普及&#xff0c;服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

编程新知 2025/10/11 20:16:53

Java并发编程实战 Day 11：并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...

编程新知 2025/7/22 8:45:31