今日は、もりけん塾で勉強会のあったビルドツールのViteについてです。
こんにちは。Webコーダーのはるです。
所属しているもりけん塾のViteハンズオン勉強会で学んだことをアウトプットします!
【もりけん塾】viteハンズオン勉強会のまとめ
もりけん先生(@terrace_tec)のハンズオン資料をもとに課題を進めながら学習しました。
勉強会のハンズオン資料はこちらです。
Vite公式のConfigページも参考にしました。
Viteとは?
- 最近、注目されているフロントのビルドツール
- Vue.jsを開発されたEvan Youさんが作ったもの
- サーバーの起動時間がとても早い
(esbuildのドキュメントより:”three.jsライブラリを10個まとめたプロダクションバンドルを、minificationやソースマップを含むデフォルトの設定でゼロから行う場合の時間”)
②よく更新されるソースコードは、ネイティブESMを通してコードが提供される
先生のハンズオン: ”ブラウザーがバンドラーの仕事をする”とあります
→このように、①と②を分けて最初に処理を行うことで、起動時間が大幅に速くなった
- VueやReactなどのフレームワークの開発環境を整えることができる
- Vite:ヴィット、ヴィートと読む
Vite課題をやってみる
もりけん先生が用意してくださった、ハンズオン課題で練習してみました。
課題の流れ
・deploy.shファイルを作成して実行(シェルに指示を出す)
→GitHub Pagesにデプロイ
復習を兼ねてまとめてみます。
Viteのプロジェクトを作成
①ターミナルでプロジェクトを作成したい場所に移動します
cd ~/Desktop
②Viteを立ち上げます
npm init @vitejs/app
→ここで、いくつか質問に答えます。
Project name: 作成するプロジェクト(ディレクトリ)の名前
framework、variant: vanilla (フレームワークはなしで、今回はvanillaを選択)
この課題でのproject nameは「vite-site」に設定。
ローカルサーバーの作成
③作成したプロジェクトへ移動
cd vite-site
④上図の最後に書いてある手順に従って
npm install
npm run dev
developサーバーが作成されました。なんと0.38秒で準備できました😂
⑤下記アドレスでローカルサーバーが確認できます(ライブリロードも既に機能する🎉)
http://localhost:3000/
GitHubにリポジトリを作成→push
⑥作成したViteのディレクトリ名と同じ「vite-site」でリモートリポジトリを作成。
⑦リモートリポジトリを作成後に出てくるコマンド通りに、ローカルとリモートリポジトリを紐づけてpushする。
git remote add origin リモートURL
git branch -M main //master→mainブランチへ変更
git push -u origin main
pushしたディレクトリ↓
shを作成する
deploy.shというファイルを作成して、下記をコピペする。(詳しくは公式のこちら)
#!/usr/bin/env sh # abort on errors set -e # build npm run build # navigate into the build output directory cd dist # if you are deploying to a custom domain # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # if you are deploying to https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # if you are deploying to https://<USERNAME>.github.io/<REPO> ########下記、自分のgithubアカウント名と作ったリポジトリ名に置き換えてください######## git push -f git@github.com:kenmori/vite-site.git master:gh-pages cd -
##下記、自分のgithubアカウント名と作ったリポジトリ名に置き換えてください########の部分を書き換える
########下記、自分のgithubアカウント名と作ったリポジトリ名に置き換えてください########
git push -f git@github.com:アカウント名/リポジトリ名.git master:gh-pages
vite.config.js
を作成
公式サイトによると、
コマンドラインからviteを実行すると、Viteは自動的にプロジェクトルート内のvite.config.jsという設定ファイルを解決しようとします。
とあります。
基本的な設定ファイルを作成してみます。先生のハンズオンを参考に作成しました。
/* vite.config.js */
import { defineConfig } from 'vite' export default defineConfig({ base: "/vite-site/" //githubで作ったリポジトリ名 })
deployする
作成したshをプロジェクト直下で実行する
sh deploy.sh
たくさんある中の最も基本的なシェル。シェルは、人間とPCの間に入って人間がPCに指示したい内容を伝えてくれるプログラムのこと。人間がPC内部と直接やりとりすることはできないのだと知りました。人間の指示→シェル→PCというように、シェルがいないと指示が届かないのですね!
参考:Shellとは(https://wa3.i-3-i.info/word11219.html)、shとは(https://wa3.i-3-i.info/word11785.html)
今回は、deploy.shというファイルに「ビルド→デプロイをする」という指示を書いて、シェルに伝えました!
GitHubで確認する
「gh-pages」というブランチがあることを確認して、移動する
リポジトリ内のsettings > pagesからGitHub pagesの作成されたリンクをクリックすると、deployページが確認できる
今回は、さらにjsに変更を加えて、再デプロイするまでが課題でした。
無事に編集したデプロイが公開されましたー!
あとがき
簡単にViteを触ってみることができるハンズオンを作っていただけてありがたいです!
勉強会がなかったら今後も知らなかったかもしれない…(?
本当は、Sassの導入や、configファイルに、画像の圧縮やIE対応、autoprefixerの付与などコーダーに必要な機能を追加してみたのですがこちらはまた時間に余裕ができたら備忘録でまとめたいと思います🙇♀️
(その際に勉強させていただいたサイトはこちらです)
もりけん先生、ハンズオン勉強会ありがとうございました!
私のVite課題のリポジトリはこちらから確認できます。
もりけん塾で勉強しています✨
もりけん先生(@terrace_tec)のHPはこちら