最新記事・WASM入門

fukke.cafe

ビルドツールを知る

用語の整理

バンドラ (bundler)

コードの圧縮ツールをバンドラといいます。 複数ファイルを1つのファイルに圧縮します。
  • webpack
  • rollup
  • esbuild
  • snowpack
  • parcel

トランスパイラ (transpiler)

コードの変換ツールをトランスパイラといいます。 変換はトランスパイルです。 トランスパイラはTypeScriptからJavaScriptへの変換や、 JavaScriptの最新バージョンから旧バージョンへ変換する。
  • tsc
  • babel
  • swc

ミニファ (minifier)

  • terser
  • uglifyjs
  • babel-minify

バンドラの設定にトランスパイラの設定を書くことが多い

  • webpack
    • ts-loader
    • babel-loader
    • css-loader
    • html-loader
  • esbuild
    • esbuild-plugin-sass
参考
https://github.com/esbuild/community-plugins

バンドラーとトランスパイル両方やってくれるツールもある

  • Vite (内部でrollup)

どれがいいの

共通で型チェックはtscを使う。
サーバーの開発環境はesbuildがおすすめ。
本番環境はrollup&terserがおすすめ。
フロントはviteがおすすめ。

メモ

webpackは内部でterserを使用。
ツイート

その他の記事

公開日 2022/05/23

目次

Thanks you for reading.