使用 Webpack 为 React 项目设置 TypeScript并使用React Hooks ( 上 )

newborn
892 阅读6分钟

文章会介绍什么是 TypeScript 以及如何在 React 项目中使用它。最后，我们将使用 TypeScript 和当前类似 React 的钩子（useState、useEffect、useReducer、useContext）做个小Demo

这篇文章不是对 TypeScript 的介绍。因此，不会过多介绍 TypeScript 和 JavaScript 的基本语法。但是，你也可以不是了解typescript和javascript，因为下面内容将尝试遵循 KISS 原则(keep it simple, stupid）

什么是Typescript

根据官方文档，TypeScript 是 JavaScript 的类型化超集，可编译为纯 JavaScript。它由 Microsoft 和开源社区开发和维护。“超集”意味着Typescript包含 JavaScript 的所有特性和功能。 TypeScript 是一种类型化的脚本语言。

它通过其类型注释、类和接口为开发人员提供了对其代码库的更多控制，从而使开发人员不必在控制台中手动修复烦人的错误。

为什么要使用Typescript

  1. 更少的Bug TypeScript 会在编译时检查类型，并在变量类型发生变化时抛出错误。
    能够早期发现这些明显的但经常发生错误使得它更容易管理你的代码类型。

  2. 重构更容易 显式定义的数据结构和类型注解使代码可读性更高。代码编辑器对ts的支持，可以让你快速的编写程序。

什么时候使用Typescript

推荐在以下两个情况下使用它

  • 如果构建一个可以长期维护的应用程序。因为它可以培养自文档化代码，从而帮助其他开发人员在加入您的代码库时轻松理解您的代码.
  • 需要创建一个库。因为它将帮助代码编辑器向使用库的开发人员建议适当的类型。

在 React 项目中设置 TypeScript

方法 1： Create React App + TypeScript

要开始一个新的 Create React App 项目，你可以运行这个…

npx create-react-app my-app

要将 TypeScript 添加到 Create React App 项目，请首先安装它及其各自的 @types：

cd my-app
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

接下来，将文件重命名（例如，将 index.js 重命名为 index.tsx），然后重新启动本地开发服务器！

方法 2：使用 Webpack 设置 TypeScript

Webpack 是 JavaScript 应用程序的静态模块打包器。

让我们从为我们的项目创建一个新目录开始：

mkdir react-webpack
cd react-webpack

我们将使用 npm 来初始化我们的项目：

npm init -y

上面的命令将生成一个带有一些默认值的 package.json 文件。我们还需要为 webpack、TypeScript 和一些 React 特定模块添加一些依赖项。

#Installing devDependencies

npm install --save-dev @types/react @types/react-dom awesome-typescript-loader css-loader html-webpack-plugin mini-css-extract-plugin source-map-loader typescript webpack webpack-cli webpack-dev-server

#installing Dependencies
npm install react react-dom

我们还需要手动在 react-webpack 文件夹下添加几个不同的文件和文件夹：

  1. 添加 webpack.config.js 来添加 webpack 相关的配置。
  2. 为我们所有的 TypeScript 配置添加 tsconfig.json。
  3. 添加一个新目录 src。
  4. 在 src 文件夹中创建一个新目录 components。
  5. 最后，在 components 文件夹中添加 index.html、App.tsx 和 index.tsx。

项目结构

├── package.json
├── package-lock.json
├── tsconfig.json
├── webpack.config.js
├── .gitignore
└── src
    └──components
        ├── App.tsx
        ├── index.tsx
        ├── index.html

开始添加一些代码 我们将从 index.html 开始：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React-Webpack Setup</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

这将创建 HTML，带有一个ID为root 的空 div。

让我们将代码添加到我们的 React 组件 App.tsx 中：

import * as React from "react";
export interface HelloWorldProps {
  userName: string;
  lang: string;
}
export const App = (props: HelloWorldProps) => (
  <h1>
    Hi {props.userName} from React! Welcome to {props.lang}!
  </h1>
);

我们创建了一个接口对象HelloWorldProps，userName 和 lang 为字符串类型。

我们将 props 传递给我们的 App 组件并将其导出。 现在，让我们更新 index.tsx 中的代码：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.render(
  <App userName="Beveloper" lang="TypeScript" />,
  document.getElementById("root")
);

我们刚刚将 App 组件导入到 index.tsx 中。当 webpack 看到任何扩展名为 .ts 或 .tsx 的文件时，它会使用 awesome-typescript-loader 库转译该文件。

Typescript配置 然后我们将向 tsconfig.json 添加一些配置：

{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "./build/",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/components/index.tsx"
  ]
}

让我们也看看我们添加到 tsconfig.json 的不同选项：

  • compilerOptions 代表不同的编译器选项。
  • jsx:react 在 .tsx 文件中添加对 JSX 的支持。
  • module 生成模块代码。
  • noImplicitAny 为隐含 any 类型的声明引发错误。
  • outDir 表示输出目录。
  • sourceMap 生成一个 .map 文件，这对于调试应用程序非常有用。
  • target 代表目标 ECMAScript 版本以将我们的代码转换为（我们可以根据我们特定的浏览器要求添加一个版本）。
  • include 用于指定要包含的文件列表。

Webpack配置
让我们在 webpack.config.js 中添加一些 webpack 配置。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: "./src/components/index.tsx",
  target: "web",
  mode: "development",
  output: {
    path: path.resolve(\__dirname, "build"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: "awesome-typescript-loader",
      },
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader",
      },
      {
        test: /\.css$/,
        loader: "css-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(\__dirname, "src", "components", "index.html"),
    }),
    new MiniCssExtractPlugin({
      filename: "./src/yourfile.css",
    }),
  ],
};

让我们看看我们添加到 webpack.config.js 的不同选项：

  • entry 这指定了我们的应用程序的入口点。它可能是我们想要包含在构建中的单个文件或文件数组。

  • output 这包含输出配置。path代表要输出的代码的输出目录，filename代表相同的文件名。它通常被命名为 bundle.js。

  • resolve Webpack 会根据这个属性来决定是打包还是跳过文件。因此，在我们的项目中，webpack 会考虑打包扩展名为 .js、.jsx、.json、.ts 和 .tsx 的文件。

  • module 我们可以使用加载器使 webpack 在应用程序请求时加载特定文件。它需要一个规则对象，指定：

  • 任何以 .tsx 或 .ts 扩展名结尾的文件都应该使用 awesome-typescript-loader 来加载；
  • 以 .js 扩展名结尾的文件应该使用 source-map-loader 加载；
  • 以 .css 扩展名结尾的文件应该用css-loader加载。
  • plugins Webpack 有其自身的局限性，它提供了插件来克服它们并扩展其功能。例如，html-webpack-plugin 创建一个模板文件，该文件从 ./src/component/index.html 目录中的 index.html 文件呈现给浏览器。

MiniCssExtractPlugin 呈现应用程序的父 CSS 文件。

添加脚本到package.json

我们可以在 package.json 文件中添加不同的脚本来构建 React 应用程序：

"scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
},

现在，在命令行中运行 npm start。如果一切顺利，您应该会看到：

image.png

运行 npm run build 将为生产构建 webpack，并将为我们创建一个构建文件夹。

上面我们已经知道了如何使用 Create React App 和 webpack 配置方法从头开始设置 TypeScript。
下篇将介绍使用 TypeScript 和当前类似 React 的钩子（useState、useEffect、useReducer、useContext）一起做个小Demo

未完待续。。。

avatar
文章
阅读
粉丝