网站建设速成班网课免费平台
之前写过类似的文章，这次看到一本新书里也介绍了这个知识点，故尝试之。
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-dom4.在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-plugin7.配置webpack
a.安装node-ts库允许在ts文件中配置:
npm i -D ts-nodeb.根目录上创建一个文件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运行结果:
源码