日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

搭建react-typescript-webpack開(kāi)發(fā)環(huán)境

作者：Krlin_ 更新時(shí)間： 2022-07-02 編程語(yǔ)言

環(huán)境

  • vscode
  • mac
  • react 18
  • webpack
  • typescript
  • npm

一、開(kāi)發(fā)環(huán)境搭建

vscode搭建react-typescript-webpack

1. 創(chuàng)建項(xiàng)目文件夾及webpack配置文件、html入口文件

mkdir react-ts-webpack-demo
cd react-ts-webpack-demo
touch webpack.config.js index.html

2. 初始化npm和創(chuàng)建入口文件index.tsx

npm init -y
  • 生成最小粒度的package.json配置文件，之后使用npm安裝的依賴(lài)包都會(huì)放在package.json文件中。
  • 創(chuàng)建src文件夾將入口文件index.tsx放進(jìn)去，此時(shí)項(xiàng)目結(jié)構(gòu)如下所示：
    在這里插入圖片描述

3. 安裝webpack\react

npm i webpack webpack-cli webpack-dev-server -D
npm i react react-dom -S

此時(shí)的packages.json文件自動(dòng)配置安裝的五個(gè)依賴(lài)包
在這里插入圖片描述

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", //指定開(kāi)發(fā)模式，默認(rèn)為none
  entry: "./src/index.tsx", //入口文件
  output: {
    path: path.resolve(__dirname, "dist"), //指定輸出文件存放到dist文件夾中
    filename: "bundle.js", //指定打包后生成的文件名稱(chēng)為bundle.js
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 由awesome-typescript-loader 解析以.tsx結(jié)尾的文件
        loader: "ts-loader", 
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"], //定義解析文件的順序，且引入這些文件可以不加后綴
  },
  plugins: [
    //指定加載的index.html
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html"),
    }),
    // 每次打包都自動(dòng)刪掉上一次打包留下的包（dist）
    new CleanWebpackPlugin({}),
  ],
};

5. 創(chuàng)建和配置tsconfig.json文件

添加 tsconfig.json 文件，告訴 webpack 去哪兒尋找 typescript 文件以及編譯選項(xiàng)配置，配置內(nèi)容如下所示：

{
  "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修改啟動(dòng)項(xiàng)目的方式

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server",
    "build": "webpack"
  },

現(xiàn)在可以使用npm run serve啟動(dòng)項(xiàng)目，npm run build打包項(xiàng)目，打開(kāi)之后是空白頁(yè)面，因?yàn)檫€沒(méi)有加入DOM元素對(duì)頁(yè)面進(jìn)行渲染。
目錄結(jié)構(gòu)如下所示：
在這里插入代碼片
packages.json文件如下所示：

{
  "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，但是做的過(guò)程中發(fā)現(xiàn)頁(yè)面渲染部分有問(wèn)題，所以在文章的基礎(chǔ)上重新做了改進(jìn)。

8. 配置index.html 、入口文件index.tsx

index.html

在body標(biāo)簽里面創(chuàng)建一個(gè)id為root的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">
    // 將項(xiàng)目標(biāo)題改為從htmlwebpackplugin中動(dòng)態(tài)獲取
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

使用createReact獲取根元素root后將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 用createRoot取代React17 的render函數(shù)去渲染DOM元素，開(kāi)發(fā)的時(shí)候遇到了DOM沒(méi)有渲染出來(lái)的問(wèn)題，可以參考附錄的開(kāi)發(fā)過(guò)程記錄文章區(qū)解決。

// 持續(xù)更新中。。。

附錄

開(kāi)發(fā)過(guò)程錯(cuò)誤記錄

  1. react 18 createRoot沒(méi)有渲染出DOM元素
  2. 運(yùn)行時(shí)出現(xiàn)Uncaught ReferenceError: process is not defined錯(cuò)誤提示

原文鏈接：https://blog.csdn.net/weixin_46353030/article/details/125518553

欄目分類(lèi)
最近更新