やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > Vite > ノーバンドルツールをインストールする【Vite】

ノーバンドルツールをインストールする【Vite】

Vite

　モジュールバンドラを入れようと思ったのだが、ググってみるとノーバンドルツールというのが後継っぽい。

成果物

ノーバンドル　ツール

特徴

高速に開発できる

  • 高速に開発できる（開発時はバンドルせず動作するため）
  • TypeScriptは型チェックしない
  • 本番用ファイルをつくるときは今まで通りバンドルする（本番環境で高速化させるため）

　ノーバンドルツールは高速に開発するのが目標っぽい。そのために型チェックしないという罠があるようだ。

Native ESM

　JavaScriptの規格であるECMA Scriptでは、今までJavaScriptを別のファイルにしたとき、その依存関係をJSコードで書き表すことができなかった。HTMLの<script>タグに書いた順序でロードされるだけだった。それが新しい規格ではできるようになった。import,export構文がサポートされた。ES Moduleと呼ばれており、ESMと略される。その後、EMSは主だったブラウザで実装されつつある。（IE11のようなサポート終了した古いブラウザには実装されていない）

　いままではwebpackなどのモジュールバンドラで複数のJSファイルをひとつにまとめていた。その処理があるせいでビルドに時間がかかり、開発体験が悪かった。それをECMAScriptの規格で定義し、ブラウザが実装した状態が、Native ESM。余計な処理がいらないため開発でも利用でも高速に動作する。ただ、現状、それらはまだ完成していない。それを擬似的に再現するツールが、ノーバンドルツールだと思われる。

　技術的な話をするとめちゃくちゃ深いっぽいので、ここまでとする。

vite

　vite（ヴィート）はノーバンドルツールの代表的な実装のひとつ。これをインストールし、使ってみる。

前提

手順

　プロジェクトを作る。

npm create vite@latest

　質問される。

  1. Ok to proceed? (y)でEnterキーを押下する。
  2. Project nameで任意プロジェクト名（ここではhello-vite）を入力する
  3. 以降はEnter連打（vanilla, vanilla）
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) 
✔ Project name: … hello-vite
✔ Select a framework: › vanilla
✔ Select a variant: › vanilla

Scaffolding project in /tmp/work/hello-vite/hello-vite...

Done. Now run:

  cd hello-vite
  npm install
  npm run dev

　移動してパッケージをインストールし、実行する。

cd hello-vite
npm install
npm run dev

　以下のような表示がでる。

  vite v2.9.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 494ms.

　ブラウザでhttp://localhost:3000/にアクセスする。

　OK！　サイトが表示された！

静的ビルド

npx vite build  --base=https://ytyaru.github.io/NoBundle.Vite.HelloWorld.20220405132637/

所感

　viteがあればwebpackなどのモジュールバンドラやvue-cliなどが不要だと思われる。なので学習予定とは変わるが、モジュールバンドラについては省く。

　つぎはフォーマットとリントをやる。

参考

対象環境

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux