使用webpack建立React+TS项目

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

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:

javascript 复制代码
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My React and TypeScript app"
}
html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My app</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

2.安装和配置ts:

bash 复制代码
npm install -D typescript

根目录新建tsconfig.json文件:

javascript 复制代码
{
  "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:

bash 复制代码
npm install react react-dom

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

bash 复制代码
 npm install @types/react @types/react-dom

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

TypeScript 复制代码
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:

bash 复制代码
npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime @babel/runtime

根目录创建.babelrc.json:

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

6.安装webpack

bash 复制代码
 npm i -D webpack webpack-cli webpack-dev-server babel-loader html-webpack-plugin

7.配置webpack

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

bash 复制代码
npm i -D ts-node

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

TypeScript 复制代码
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中追加启动脚本:

javascript 复制代码
,
  "scripts": {
    "start": "webpack serve --config webpack.dev.config.ts"
  }

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

bash 复制代码
npm start

运行结果:

源码

相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构