Closed9

esbuild入門

HTMLGOHTMLGO

https://esbuild.github.io/

とにかくbuildが速い。
このサイトの説明だと0.39s, それに対し、webpack 5だと41.21sかかる。

Major features:

Extreme speed without needing a cache
JavaScript, CSS, TypeScript, and JSX built-in
A straightforward API for CLI, JS, and Go
Bundles ESM and CommonJS modules
Bundles CSS including CSS modules
Tree shaking, minification, and source maps
Local server, watch mode, and plugins
  • キャッシュ不要で超高速
  • JavaScript、CSS、TypeScript、JSXを内蔵
  • CLI、JS、GoのためのわかりやすいAPI
  • ESMとCommonJSモジュールをバンドル
  • CSSモジュールを含むCSSのバンドル
  • ツリーシェイク、最小化、ソースマップ
  • ローカルサーバー、ウォッチモード、プラグイン

https://jitera.com/ja/insights/37883

HTMLGOHTMLGO
app.jsx
import React from 'react';
import * as Server from 'react-dom/server';

const Greet = () => <h1>Hello, world!</h1>;
console.log(Server.renderToString(<Greet />));

以下で実行、jsxをデフォルトでトランスパイルしてくれる。
めちゃくちゃ速いぞ。。

./node_modules/.bin/esbuild app.jsx --bundle --outfile=out.js

出力されたjsを実行する

node ./out.js

これが出力される

<h1 data-reactroot="">Hello, world!</h1>
HTMLGOHTMLGO

nodeを使用する際にバンドルは必要ないとはいえ、コードをnodeで実行する前にesbuildで処理することが有益な場合もある。
バンドルすることで、TypeScriptの型を自動的に取り除いたり、ECMAScriptモジュールの構文をCommonJSに変換したり、新しいJavaScriptの構文をnodeの特定のバージョン用の古い構文に変換したりすることができる。
また、パッケージを公開する前にバンドルすることで、ダウンロードのサイズを小さくし、ロード時にファイルシステムから読み込む時間を短縮することができる。

nodeで実行されるコードをバンドルする場合は、esbuildに--platform=nodeを渡してプラットフォームの設定を行う必要があります。
これは同時にいくつかの異なる設定をnodeに適したデフォルト値に変更する。
例えば、esbuildがそれらをバンドルしようとしないように、fsのようなnodeに組み込まれているパッケージはすべて自動的にexternalとマークされます。
この設定は、package.jsonのブラウザフィールドの解釈も無効にします。

お使いの node のバージョンで動作しない新しい JavaScript 構文を使用している場合は、
node のターゲットバージョンを設定します:

esbuild app.js --bundle --platform=node --target=node10.4
HTMLGOHTMLGO
bundle.mjs
import * as esbuild from 'esbuild'

await esbuild.build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
})

ワンライナーだと書きにくいので、設定ファイル作って
実行できる

  "scripts": {
    "build": "node ./build.mjs"
  },
HTMLGOHTMLGO

buildの設定

https://esbuild.github.io/api/#build

import * as esbuild from 'esbuild'

let result = await esbuild.build({
  entryPoints: ['app.ts'],
  bundle: true,
  outdir: 'dist',
})
console.log(result)

watchモード

let ctx = await esbuild.context({
  entryPoints: ['app.ts'],
  bundle: true,
  outdir: 'dist',
})

await ctx.watch()

serveモード


let ctx = await esbuild.context({
  entryPoints: ['app.ts'],
  bundle: true,
  outdir: 'dist',
})

let { host, port } = await ctx.serve()

rebuildモード

let ctx = await esbuild.context({
  entryPoints: ['app.ts'],
  bundle: true,
  outdir: 'dist',
})

for (let i = 0; i < 5; i++) {
  let result = await ctx.rebuild()
}
HTMLGOHTMLGO

esbuildには同期型、非同期型がある。

https://esbuild.github.io/api/#js-details

非同期APIコールはプロミスを使用して結果を返す。importとトップレベルのawaitキーワードを使用するため、nodeで.mjsファイルの拡張子を使用しなければならない可能性が高いことに注意してください:

import * as esbuild from 'esbuild'

let result1 = await esbuild.transform(code, options)
let result2 = await esbuild.build(options)

同期APIコールはその結果をインラインで返す:

let esbuild = require('esbuild')

let result1 = esbuild.transformSync(code, options)
let result2 = esbuild.buildSync(options)
このスクラップは1ヶ月前にクローズされました