環境
- vscode
- マック
- 反応する 18
- ウェブパック
- タイプスクリプト
- npm
1.開発環境構築
vscode は react-typescript-webpack をビルドします
1. プロジェクト フォルダー、webpack 構成ファイル、および html エントリ ファイルを作成します。
mkdir react-ts-webpack-demo
cd react-ts-webpack-demo
touch webpack.config.js index.html
2. npm を初期化し、エントリ ファイル index.tsx を作成します。
npm init -y
- 最小の粒度で package.json 構成ファイルを生成すると、npm でインストールされた依存パッケージが
package.jsonファイルに配置されます。 - src フォルダを作成し、その中にエントリ ファイル index.tsx を入れます。このとき、プロジェクトの構造は次のようになります。
3. webpack\react をインストールします
npm i webpack webpack-cli webpack-dev-server -D
npm i react react-dom -S
この時点で、packages.json ファイルは、インストールされている 5 つの依存パッケージを自動的に構成します。
4. webpack.config.js を構成する
（1）インストールhtml-webpack-plugin、clean-webpack-plugin、awesome-typescript-loader、typescript
npm i html-webpack-plugin --dev
npm i clean-webpack-plugin -S
npm i typescript ts-loader -D
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {
CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "development", //指定开发模式，默认为none
entry: "./src/index.tsx", //入口文件
output: {
path: path.resolve(__dirname, "dist"), //指定输出文件存放到dist文件夹中
filename: "bundle.js", //指定打包后生成的文件名称为bundle.js
},
module: {
rules: [
{
test: /\.tsx?$/, // 由awesome-typescript-loader 解析以.tsx结尾的文件
loader: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"], //定义解析文件的顺序，且引入这些文件可以不加后缀
},
plugins: [
//指定加载的index.html
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "index.html"),
}),
// 每次打包都自动删掉上一次打包留下的包（dist）
new CleanWebpackPlugin({
}),
],
};
5. tsconfig.json ファイルを作成して構成する
tsconfig.json ファイルを追加して、webpack に typescript ファイルの場所を伝え、オプションの構成をコンパイルします。構成の内容は次のとおりです。
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}
6. @react ファイルをインストールする
@types/ プレフィックスを使用すると、React および React-DOM の宣言ファイルを追加で取得する必要があることを意味します
npm i @types/react @types/react-dom -D
7. package.json に移動して、プロジェクトの開始方法を変更します
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack-dev-server",
"build": "webpack"
},
ページをレンダリングするための DOM 要素が追加されていないため、npm run serveスタートアップ プロジェクトを使用し、プロジェクトをパッケージ化し、空白のページを開くことができます。ディレクトリ構造は次のとおりです。packages.json ファイルは次のとおりです。npm run build
{
"name": "react-ts-webpack-demo",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack-dev-server",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"clean-webpack-plugin": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.2"
}
}
ps: 上記の手順は記事: https://zhuanlan.zhihu.com/p/59023070 を参照していますが、それを行う過程で、ページのレンダリング部分に問題があることがわかったので、ベースに改善を行いました記事について。
8. index.html とエントリ ファイル index.tsx を構成します。
index.html
エントリ ファイルへのアクセスを容易にするために、id が body タグのルートである div を作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 将项目标题改为从htmlwebpackplugin中动态获取
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
createReact を使用してルート要素ルートを取得し、ルート要素の下に DOM をレンダリングします。
import * as React from "react";
import {
createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));
root.render(<h1>Hello world!</h1>);
react 18 は、react 17 の render 関数を置き換えて DOM 要素をレンダリングするために createRoot を使用します. 開発中に DOM がレンダリングされないという問題があります. 付録の開発プロセス記録記事領域を参照して解決できます.
// 継続的に更新します。. .