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

使用webpack建立React+TS项目

news 2026/4/11 12:59:47

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

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

HTML5 框架

HTML5 框架学习笔记 在 HTML5 中&#xff0c;“框架”通常指两个层面的概念&#xff1a; <iframe> 标签&#xff1a;用于在当前页面中嵌入另一个 HTML 页面&#xff08;内联框架&#xff09;。前端框架/库&#xff1a;基于 HTML5 标准构建的现代化开发框架&#xff08;如…...

编程新知 2026/4/11 12:58:24

别再只测功能了！手把手教你为数据防泄露系统设计一份实战测试用例（附WinPE、虚拟机等16个场景）

数据防泄露实战测试&#xff1a;从高危场景到防御验证的完整指南 当企业核心代码库在深夜被批量下载到某个境外IP时&#xff0c;安全团队往往要等到审计警报响起才发现问题。更令人不安的是&#xff0c;我们最近对50家科技公司的调研显示&#xff0c;83%的内部数据泄露都发生在…...

编程新知 2026/4/11 12:22:04

终极网页转Markdown工具：MarkDownload高效内容提取全攻略

终极网页转Markdown工具&#xff1a;MarkDownload高效内容提取全攻略 【免费下载链接】markdownload A Firefox and Google Chrome extension to clip websites and download them into a readable markdown file. 项目地址: https://gitcode.com/gh_mirrors/ma/markdownload…...

编程新知 2026/4/11 12:20:04

尝试以底层角度，理解c++代码书写逻辑

大家好&#xff0c;现在是4月10号下午6点7分&#xff0c;又来写blog了&#xff01;废话不多说&#xff0c;我来写写要将内容的大纲&#xff1a;一&#xff1a;由c转为c时&#xff0c;写代码时出现的困惑二&#xff1a;实验性理论开发之路三&#xff1a;理论哈哈&#xff0c;就三…...

编程新知 2026/4/11 12:16:03

告别复杂配置：用MS-Swift + vLLM 5分钟搞定Qwen2.5-VL的API服务部署与调用

5分钟极速部署Qwen2.5-VL多模态API&#xff1a;MS-Swift与vLLM实战指南 当我们需要将多模态大模型快速集成到智能客服、内容审核或教育工具中时&#xff0c;传统部署流程往往让人望而却步——从环境配置到模型优化&#xff0c;再到API封装&#xff0c;每一步都可能成为项目落地…...

编程新知 2026/4/11 11:59:43

终极RPG Maker插件解决方案：如何快速提升你的游戏开发效率

终极RPG Maker插件解决方案&#xff1a;如何快速提升你的游戏开发效率 【免费下载链接】RPGMakerMV RPGツクールMV、MZで動作するプラグインです。 项目地址: https://gitcode.com/gh_mirrors/rp/RPGMakerMV 你是否在RPG Maker开发过程中遇到过这些令人头疼的问题&#…...

编程新知 2026/4/11 11:39:08

Qwen2.5-VL-7B-Instruct部署教程：离线环境无网络安装依赖包完整方案

Qwen2.5-VL-7B-Instruct部署教程&#xff1a;离线环境无网络安装依赖包完整方案 1. 学习目标与前置准备 Qwen2.5-VL-7B-Instruct是一款强大的多模态视觉-语言模型&#xff0c;能够同时处理图像和文本输入&#xff0c;生成高质量的响应。本教程将带你完成在离线环境下的完整部…...

编程新知 2026/4/11 11:30:58

CHORD-X开发入门：C语言基础与系统底层接口调用示例

CHORD-X开发入门&#xff1a;C语言基础与系统底层接口调用示例 如果你对CHORD-X系统的视觉处理能力感兴趣&#xff0c;想自己动手写点程序来调用它&#xff0c;但又觉得那些复杂的框架和高级语言有点绕&#xff0c;那这篇文章就是为你准备的。咱们今天不聊Python&#xff0c;也…...

编程新知 2026/4/11 10:41:23

gte-base-zh模型服务治理：Xinference多租户隔离与资源配额控制实践

gte-base-zh模型服务治理&#xff1a;Xinference多租户隔离与资源配额控制实践 1. 项目背景与需求场景 在实际的企业级AI应用部署中&#xff0c;我们经常面临这样的挑战&#xff1a;多个团队或项目需要共享同一个模型服务&#xff0c;但各自有不同的资源需求和隔离要求。传统…...

编程新知 2026/4/11 10:19:09

750亿元！生命科学软件市场规模披露，技术创新驱动赛道加速成长

据恒州诚思调研统计&#xff0c;2025年全球生命科学软件市场规模约达750亿元。鉴于生命科学领域对数字化、智能化解决方案的需求日益增长&#xff0c;以及软件技术在数据处理、模型构建等方面的持续创新&#xff0c;预计未来该市场将持续保持平稳增长态势&#xff0c;到2032年市…...

编程新知 2026/4/11 9:27:48