【もりけん塾】viteハンズオン勉強会

JavaScript

8月22日にviteハンズオン勉強会がありました。
もりけん先生が作成してくれた資料を元に、環境構築からGitHubにデプロイまでを行いました。
今回はその学習記録です。

昨日は勉強会でした | 株式会社TerraceTech(テラステック)
昨日は勉強会でした。 -「インハウスのWebデザイナーから制作会社のエンジニアになるためにした事」 「インターネットの仕組み-ブラウザにWebサイトが表示されるまでの旅:airplane:-」 「Re:ゼロから始めるBabel + webpack で快適開発環境入門」 「viteハンズオン」 【ゆる募】#もりけん塾 #...

viteとは

Vueの作成者が作ったフロントエンドビルドツール。
viteはヴィートと読み、フランス語で「速い」を意味する。
とりあえず超高速!
これから来るであろう、ネクストブレイクフロントエンドビルドツール!!!!

Vite
Next Generation Frontend Tooling

特徴

Vite.js pre-bundles the dependencies with esbuild 10 to 100 times faster than JavaScript-based bundlers. It serves the source code over native ESM and lets the browser do the job of bundler. It only transforms the source code on demand whenever the browser requests it. Then, it bundles the code with Rollup for production.

//DeepL使用
Vite.jsは、JavaScriptベースのバンドルラーよりも10~100倍高速にesbuildで依存関係を事前にバンドルします。Vite.jsはソースコードをネイティブのESMで提供し、ブラウザにバンドルラーの仕事をさせます。ブラウザがソースコードを要求したときだけ、必要に応じてソースコードを変換します。その後、Rollupでコードをバンドルして本番に臨みます。

https://medium.com/habilelabs/introducing-vite-js-an-opinionated-frontend-build-tool-484385701245

Introducing Vite.js — An Opinionated Frontend Build Tool
A pre-configured bundler for unbundled development!
JavaScript モジュール - JavaScript | MDN
本章では、JavaScript のモジュールを使い始めるために必要なことすべてを紹介します。

以下のリンク先では、
ビルドツールの満足度や関心、実際に使用されている率を見ることができます。
ビルドツールの多さと、入れ替わりの早さに驚きました。

State of JS 2020: Build Tools
The annual survey about the latest trends in the JavaScript ecosystem.

導入

もりけん先生が作成した資料と公式ドキュメントを見ながら導入を行いました。

handsonFrontend/Work.md at master · kenmori/handsonFrontend
フロントエンドエンジニアを目指す方へのハンズオン資料. Contribute to kenmori/handsonFrontend development by creating an account on GitHub.

インストール

 % npm init @vitejs/app

ディレクトリが生成

// プロジェクトネーム(デフォルトはvite-project)
? Project name: ›   

//テンプレートの選択
? Select a framework: › - Use arrow-keys. Return to submit. 
❯   vanilla
    vue
    react
    preact
    lit-element
    svelte

? Select a variant: › - Use arrow-keys. Return to submit.
❯   vanilla
    vanilla-ts

ディレクトリ内を見る

npm i

package-lock.jsonとnode_modulesが生成

実行

npm run <スクリプト名>で実行

//package.json  
"scripts": {                                     
    "dev": "vite",                               // 開発用サーバーが起動
    "build": "vite build",                  // distフォルダーが生成
    "serve": "vite preview"            //  distフォルダー内を反映したサーバー起動
  },

sassも追加してみる

npm install -D sass

style.cssの拡張子を.scssへ変更し、HTMLで読み込むだけでCSSへコンパイルできました。

<link rel="stylesheet" href="./style.scss">

ファイル分割もできました
style.scssで読み込みたいファイルをimportしました。

@import './sass/_test';

デプロイする

GitHubPageへデプロイを行いました。
(もりけん先生が作成した資料を元に復習をしました)

ローカルでgit initし、git commit まで行いました
GitHubにリモートリポジトリを作成し、以下をコピペしました

これでリモートリポジトリへ反映できました

deploy.shを作成

#!/usr/bin/env sh

# エラー時は停止
set -e

# ビルド
npm run build

# ビルド出力ディレクトリに移動
cd dist

# カスタムドメインにデプロイする場合
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# https://<USERNAME>.github.io にデプロイする場合
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# https://<USERNAME>.github.io/<REPO> にデプロイする場合
git push -f git@github.com:sae-github/vite-project master:gh-pages

cd -

vite.config.js 作成

カスタマイズを行うファイル。
defineConfig を使用すると補完を行ってくれる。

import { defineConfig } from 'vite'

export default defineConfig({
   base: "/vite-project/" //こちらはgithubで作ったリポジトリ名です
})

他にもオプションがいくつもありました

脱線:開発用と本番用でディレクトリをわける

build.outDirは出力ディレクトリ(rootに対して)を指定することができます

export default defineConfig({
  root: 'src',
  build: {
    outDir: '../dist'
  }
})

これで実行してみると、srcディレクトリ(開発用)とdist(本番用)でわけることができました↓

Configuring Vite | Vite
Next Generation Frontend Tooling

実行

 sh deploy.sh

GitHubを確認すると、gh-pagesブランチが確認できます。

index.htmlとassetsフォルダが反映されました

Settings→Pages→URLをクリック

デプロイできました!

まとめ

もりけん先生が作成してくれた資料を見ながら、
環境構築からGitHub Pagesへデプロイ までを行いました。

また一つ新しいことに触れることができました。
こんな機会がなければ、viteを知る日はずっと先だった気がします…

ありがとうございました。

コメント

タイトルとURLをコピーしました