esbuild入門
HTMLGO
とにかく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のバンドル
- ツリーシェイク、最小化、ソースマップ
- ローカルサーバー、ウォッチモード、プラグイン
HTMLGOimport 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>
デフォルトではブラウザ用のバンドルをしてくれるらしい。
development環境で、source-mapを使用したり
production環境で、mififyしてくれる
esbuild app.jsx --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16
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
import * as esbuild from 'esbuild'
await esbuild.build({
entryPoints: ['app.jsx'],
bundle: true,
outfile: 'out.js',
})
ワンライナーだと書きにくいので、設定ファイル作って
実行できる
"scripts": {
"build": "node ./build.mjs"
},
コマンドラインから文字列をトランスパイルすることもできる。
$ echo 'let x: number = 1' | npx esbuild --loader=ts
let x = 1;
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()
}
esbuildには同期型、非同期型がある。
非同期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)
General options