ESBuildで+++のアプリケーションを反応

プロジェクトがあるESBuild , 基本的にはバンドルやロールプのようなバンドルで、フロントエンドの開発スペースでたくさんのノイズを作っています.なぜ?主に非常に高いパフォーマンスを提供するその約束のために.


ソースhttps://esbuild.github.io/
私は、これが特に大きいプロジェクトまたは大チームのために大きいと言います.実際には、それも私はそれに興味を持っている理由ですボックスのtypescriptをサポートしています.このブログでは、私たちはESBuildを探索し、単純なtypescript +反応アプリを構築するために使用します.
始めましょう!

プロジェクトのセットアップ
まず、新しいディレクトリを作成し、新しいpackage.json ファイル

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

それから、我々が我々のバンドルをセットアップするためにインストールする必要がある唯一のものはそうですesbuild :

npm i esbuild

我々が反応アプリを構築しているので、我々は、これらの2つのパッケージのタイプ定義とfolllowsとしてtypescriptコンパイラとともに、反応とreactdomをインストールしようとしています:

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を使用していますが、あなたの選択のいずれかを使用することができます.

サンプルアプリを書く
アプリケーションエントリポイントをsrc フォルダとしてapp.tsx :

さあ、基本的なコードを書きましょう.ここでは、以下のような共通ライブラリとフックのいくつかをインポートします.React , useCallback , useState , and ReactDOM . 我々のアプリは、支柱としてメッセージを取る簡単なコンポーネントで構成され、0に初期化されているカウンタのための内部状態を持っている、1でカウントをインクリメントし、この情報を示す簡単なUIをコールバック関数.

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>
    </>)
};

次に、私たちのHTML内のルート要素にreactdomを使用して、単純なメッセージをこのアプリのコンポーネントをレンダリングしましょう.

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

もちろん、次のステップは、実際に我々のアプリが座ってこのHTMLを作成することです.我々は、兄弟フォルダを作成することによってこれを行いますsrc 呼ばれるpublic/index.html . このファイルには、IEルートを持つ単純なdivが含まれています.ここでは、以前の反応アプリコンポーネントとJSバンドルをロードするスクリプトをレンダリングします.
それは我々のアプリのためだ!

バンドルアプリケーション
次のステップは、我々のアプリをバンドルするesbuildを使用することです.TSXあなたがWebpackまたはRollupで働いたならば、あなたはこのプロセスを知っています.
バンドルする前に、最初にスクリプトを追加しますpackage.json 呼ばれるbuild ESBuildを起動し、いくつかのフラグ(バンドル、minify、およびsourceMap)と出力ターゲットと一緒にアプリケーションのエントリポイントを渡すpublic/bundle.js .

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

Oilaとちょうどあなたが走るときnpm run build 我々はほとんど目の点滅(30 ms!)で我々のアプリを構築完了する必要があります!!

最後に、アプリケーションを実行するだけで簡単にする必要があります.ちょうどインデックスをポイントします.HTMLファイルとそれを実行します.

open index.html

ESはどのようにしてそのような速度を達成しますか?
ESBuildコンパイラは実際にJavaScript生態系を対象としますが、Goで書かれています.現在、私は個人的にブートストラッププロジェクトのファンです.例えば、typescriptコンパイラはtypescriptで書かれています.しかし、このレベルのパフォーマンス改善のためのJavaScriptプロジェクトのGOコンパイラは、私のために価値がある.
また、espackがwebpackのような何かに比較されるとき、また、より低いレベルであることにも気づくかもしれません.あなたがwebpack devサーバのように、webpackとして開発者人間工学の同じレベルを望むならば、あなたはESBuildVite or Snowpack . 実際には、これらのツールは、実際にフードの下でesbuildを使用する!
すべてのすべてでは、ESBuildはまだあなたが潜在的にアプリケーションを構築することができますどのくらいの速をテストするための大きな出発点です.もちろん、このスケルトンコードを使用して探索し、それを構築する無料です.私は個人的にeSBuildであなたの考えや経験を聞くことを楽しみにしています!