JavaScript を使う場合、結局どの組み合わせがいいのか?

from ベストプラクティスを求めて

サーバーサイドJavaScript

Node.js

Deno

Bun

パッケージ管理システム

npm

Yarn

pnpM

Bun

コードフォーマッター

トランスパイラ、ビルダー、minify

Babel (ES2019)

TypeScript

webpack

Rollup

esbuild

Parcel

Browserify

Vite

Bun

SWC https://swc.rs/

Rust で書かれたツール

テストフレームワーク

Webフレームワーク

最新の ECMAScript 対応するなら Babel は外せない。

TypeScript も同等?

Babel 7 からは TypeScript をコンパイル可能

Babel は型チェックをしてくれない。

歴史的経緯

サーバーサイドで JavaScript が使いたいというので ServerJS というのができた。

サーバーサイドだけではないだろというので CommonJS になった。

サーバーサイド(コマンドライン)は事実上 Node.js がデファクトスタンダード

CommonJS の実装、ということに CommonJS 側からはされているが Node.js 側はそうでもないらしい

CommonJS が決まらないので AMD で非同期モジュール仕様ができた

AMD の仕様から RequreJS ができた

CommonJS の仕様から Browserify ができた

どれでも動かせるようにと UMD ができた。(単に共通になるように判断文を入れるだけだが地獄)

RequireJS と Browserify のいいとこ取りで webpack ができた

webpack が遅すぎるというので Rollup, esbuild ができた

DOM 操作がとても煩雑であるため、仮想 DOMと JSX が考え出された。これをトランスパイルする必要が出てきた。

TypeScript は JavaScript(ECMAScript)の完全上位版。JavaScript のままで書けて、TypeScript を使わなくてもよい。

JavaScript に型の概念を持ち込む。静的な型チェックを行う。

TypeScript で書いても JavaScript から使うことができる。

参考

JavaScriptとECMAScript、CommonJS/AMD/Browserify/RequireJS/Webpack、TypeScriptに関する覚え書き https://www.ideaxidea.com/archives/2015/02/javascript_history.html

code:develop_tree.txt

+ dist

+ src

+ index.html

+ app.js

Node.js が必要。

Windows + scoop の場合

code:console

scoop install nodejs

Node.js がインストールされたことの確認

Windows + scoop の場合

code:console

node --version

v13.5.0

code:console

npm install webpack

webpack を開発環境にも入れる

code:console

npm install webpack --save-dev

npm でプロジェクトのルートディレクトリに package.json を作る。

code:console

npm init -y

Babel と webpack を使う。

code:index.html

<!DOCTYPE html>

<html>

<head>

<title>Hello, world!</title>

</head>

<body>

</body>

</html>

サーバーサイドのソースとクライアントサイドのソースとをどう取り扱うか?

1つのプロジェクト(project.json)で賄える?

ビルドの方法をきちんと定義すればできる。

node.js 上で実行するのはあくまでサーバーサイド

クライアントサイドはトランスパイルされたファイルの配置ができればよい。