使用 ESBuild 的 React+Typescript 应用程序

有一个名为ESBuild的项目，本质上是一个类似 web-pack 或 rollup 的打包工具，它在前端开发领域引起了不小的轰动。为什么？主要是因为它承诺提供极高的性能。

来源-https: //esbuild.github.io/

我想说，这对于大型项目或大型团队来说尤其有用。事实上，它甚至开箱即用地支持 Typescript，这也是我对它感兴趣的原因。在本博客中，我们将探索 ESBuild，并使用它构建一个简单的 Typescript+React 应用。

让我们开始吧！

设置项目

首先，让我们创建一个新目录并初始化一个新package.json文件：

mkdir sample-ts-react-app
cd sample-ts-react-app/
npm init -y

然后，我们设置捆绑器唯一需要安装的是esbuild：

npm i esbuild

由于我们正在构建一个 React 应用程序，我们将安装 React 和 ReactDom 以及这两个包的类型定义和 TypeScript 编译器，如下所示：

npm i react react-dom @types/react @types/react-dom typescript

安装完成后，让我们使用 Typescript 编译器初始化一个新的tsconfig.json。在这里，我们还将指定所有源文件都将位于src/文件夹下，并且我们将使用react：

npx tsc --init --rootDir src --jsx react

就这样！我们已经设置好了项目，现在让我们在 IDE 中打开文件夹。我使用的是 Visual Studio，你也可以使用其他 IDE。

编写示例应用程序

让我们在src文件夹下创建应用程序入口点app.tsx：

现在让我们编写一些基本代码。这里我们导入一些常用的库和钩子，包括：、、React和。我们的应用将包含一个简单的组件，该组件将接收一条消息作为 prop，具有一个初始化为 0 的计数器的内部状态、一个将计数加 1 的回调函数，以及一个显示此信息的简单 UI。useCallbackuseStateReactDOM

import React, { useCallback, useState } from "react";
import ReactDOM from "react-dom";

const App = (props: { message: string }) => {
    const [count, setCount] = useState(0);
    const increment = useCallback(() => {
        setCount(count => count + 1);
    }, [count]);
    return(<>
        <h1>{props.message}</h1>
        <h2>Count: {count}</h2>
        <button onClick={increment}>Increment</button>
    </>)
};

然后让我们使用 ReactDOM 将这个应用程序组件和一条简单消息渲染到我们的 html 中的根元素上。

ReactDOM.render(
  <App message="Hello World! Simple Counter App built on ESBuild + React + Typescript"/>,
  document.getElementById('root')  
);

当然，下一步是实际创建我们应用所依赖的 HTML。我们将通过创建一个名为 的同级文件夹来实现这一点src。public/index.html此文件将包含一个 id 为 root 的简单 div，我们将把之前的 React App 组件渲染到该 div 中，并包含一个用于加载 JS Bundler 的脚本。

这就是我们的应用程序！

使用 ESBuild 捆绑应用程序

下一步是使用 ESBuild 打包我们的 app.tsx。如果你使用过 webpack 或 rollup，你应该熟悉这个过程。

在捆绑之前，我将首先在调用中添加一个脚本，package.json该脚本build将调用 ESBuild 并传入应用程序的入口点以及一些标志（捆绑、最小化和源映射）和输出目标public/bundle.js。

//pacakage.json
"scripts": {
   "build": "esbuild src/app.tsx --bundle --minify --sourcemap --outfile=public/bundle.js"
}

Oila，就像这样，当您运行时，npm run build我们应该能够几乎在眨眼间完成应用程序的构建（30 毫秒！！！）

最后运行应用程序应该足够简单。只需指向 index.html 文件，它就会运行：

open index.html

ES Build 如何实现这样的速度？

ESBuild 编译器实际上针对的是 JavaScript 生态系统，但它是用 Go 编写的。我个人很喜欢 Bootstrap 项目，例如用 TypeScript 编写的 TypeScript 编译器。然而，对于我来说，这种程度的性能提升，让 Go 编译器为 JavaScript 项目带来的改进确实物有所值。

你可能还注意到，与 webpack 之类的工具相比，ESBuild 的层次要低得多。如果你想要获得与 webpack 相同级别的开发工效学（例如 webpack dev-server），你可能需要将 ESBuild 与Vite或Snowpack之类的工具结合使用。事实上，这些工具在底层实际上使用了 ESBuild！

总而言之，ESBuild 仍然是一个很好的起点，可以用来测试你构建应用程序的速度。当然，你可以自由地使用这个框架代码进行探索和构建。我个人非常期待听到你对 ESBuild 的想法和经验！