使用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:
-
{
-
"name": "my-app",
-
"version": "1.0.0",
-
"description": "My React and TypeScript app"
-
}
-
-
<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
运行结果:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfhebg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01