inbox

何となく調べちゃったとか調べたかったとかを書き残す。
正確性は保証しない、どんなのあったっけ？が見つかるようにしたい。

フロントエンドビルドツール

TODO: ほんとは使ってみてどうなの、とか書けると良い。

とはいえ、仕事でも趣味でも「フロントエンド開発」をしてきていないので、既存リソースが無い。したがって、どれか学んで使うまではしないと書けなくなっちゃうのでまずは頭でっかちで書いちゃう。

bundle: 包みにする、束にする、括る、包む
https://ejje.weblio.jp/content/bundle

ビルドツールの大半は　JavaScript/TypeScript の AST(Abstract Syntax Tree: 抽象構文木) を解析しているのかしら。

browerify

https://browserify.org/

Latest: v17.0.0

Node.js 向けに書かれた JavaScript をブラウザ向けに変換してくれるツール。具体的には Node.js でのモジュール呼出 require("module"); でいろんな npm モジュールを呼び出す JavaScript を、1 つのバンドルした JavaScript にしてくれる。

モジュールには CommonJS を使用。

Webpack

https://webpack.js.org/

Latest: v5.74.0

一番よく聞くやつ。Browserify は JavaScript をバンドルするツールだったけど、こっちは Assets としていてあらゆるファイルをバンドルする。

import xxx from "xxx.js" とかするとコード持ってきて1つにまとめたり、その他の静的ファイルを集めたり、バンドルするときに ts-loader のようなプラグインを使って TypeScript をトランスパイルしたり自動化も図れる

モジュールには CommonJS を使用。

Rollup

https://rollupjs.org/guide/en/

Latest: v2.77.2

JS フレームワーク(コンパイラ) Svelte のテンプレで使用

Webpack と同様のバンドラだが、ES6 を採用することで ES Module が利用でき、ビルドの高速化と結果の軽量化が図られている。

モジュールには ES Module を使用。プラグインにより CommonJS も使用可能。

Snowpack

https://www.snowpack.dev/

Latest: v3.8.8

Rollup をベースに ES Module を使ったバンドルしないアプローチを取ることで、より高速かつ軽量なビルド・ビルド結果を目指した。

2022/04/20: 更新終了、Vite 移行を推奨

Vite

https://ja.vitejs.dev/

Latest: v3.0.4

より速く無駄のない開発体験(Developer Experience)の提供を目的としている。ざっくり開発環境と本番向けビルドを提供する

開発環境向けの依存関係のバンドルには esbuild を使うみたい。
本番環境向けのビルド(production build)ではバンドルに Rollup を使う。
esbuild は速いけど開発途中なんだよねぇって感じ。

esbuild

https://esbuild.github.io/

now: v0.14.53

An extremely fast JavaScript bundler

JS/TS 対応のビルドツールで、標準でトランスパイルからできるっぽい。

環境構築自動化関連でツールに対してスゴイ雑な理解したので残す。

• Docker: コンテナ管理ツール
  • Dockerfile でどんなコンテナか定義
• docker-compose: コンテナ群管理ツール
  • docker-compose.yml でどんなコンテナ群か定義
• Kubenetes(k8s): コンテナオーケストレーションツール
  • コンテナやコンテナ群を管理する
• Vagrant: 仮想マシン版 docker, docker-compose みたいなツール
  • Vagrantfile でどんな仮想マシン、仮想マシン群か定義
• Ansible: 構成管理ツール
  • playbook でどんな状態であるべきか定義
  • SSH 接続出来れば使える

近いもの

• Vagrant with Ansible
  • 仮想マシンらとその環境構築を行なう
• docker-compose with docker
  • コンテナらとその環境構築を行なう

Vagrantfile ≒ docker-compose.yml
playbook ≒ Dockerfile

仮想マシンでしっかり環境再現したいか、コンテナでサクッと検証したいかで使い分ければいいのかしら。
とはいえ Windows でも WSL2 使えるようになってから良い感じに Linux 仮想環境使えるし Docker 使えばいいのではって気もする。

プロキシに阻まれるのはお互いそうだろうから、お祈りしながら徳を積まないといけない。

個人的に気になってたり使っていきたい技術覚書

• framewrok
  • Svelte
  • SvelteKit
  • Snel
  • Astro
  • Deno
• language
  • TypeScript
  • Rust
  • Elixir
• connection
  • gRPC
  • tRPC
• CI/CD
  • Dagger

asdf: バージョン管理ツール

https://asdf-vm.com/

色々なもののバージョン管理ができるっぽいので、いろいろやりたいことが多いから合っているかもしれない。