　プロジェクトを生成してからGitHub Pagesにアップロードするまで。

成果物

DEMO
github

項目	入力値
`Project name`	`hello-vite`
`Select a framework`	`vanilla`
`Select a variant`	`vanilla`

　以下のようなプロジェクト名を入力したらパッケージ名を入力する欄が出てきた。わからんのでEnterキーを入力したら、自動的に小文字化され.が-になった。どうやらプロジェクト名に大文字や.を使えるが、パッケージ名は小文字と-しか使えないらしい。

✔ Project name: … NoBundler.Vite.Setting.HelloWorld.20220406102234
✔ Package name: … nobundler-vite-setting-helloworld-20220406102234
✔ Select a framework: › vanilla
✔ Select a variant: › vanilla

項目	該当
プロジェクト名	ディレクトリ名
パッケージ名	`package.json`の`name`値

cat package.json

{
  "name": "nobundler-vite-setting-helloworld-20220406102234",
  ...
}

項目	入力値
`Project name`	`NoBundler.Vite.Setting.HelloWorld.20220406102234`
`Package name`	`nobundler-vite-setting-helloworld-20220406102234`
`Select a framework`	`vanilla`
`Select a variant`	`vanilla`

2-1-2. 出力ファイル

$ ls
favicon.svg  index.html  main.js  package.json  style.css

　自動的にソースコードが出力されていることを確認する。

　あとでこれらをsrc/ディレクトリに移動する。

2-2. プロジェクトのルートへ移動する

cd NoBundler.Vite.Setting.HelloWorld.20220406102234

2-3. パッケージをインスト―ルする

npm install

3. 実行する

3-1. 開発環境で実行する

npm run dev

　高速に表示する。その代わりTypeScriptの型チェックはしないなど処理が省かれる。

　サーバを終了するには端末にてCtrl+Cキーを押す。

3-2. 開発環境でビルド＆プレビューする

　dist/ディレクトリに本番用コードを出力する。

npm run build

　それをローカルサーバで表示する。

npm run preview

　以下のようにURLが表示されるので、ブラウザでアクセスする。

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

　以下のような画面が出たら成功。

　サーバを終了するには端末にてCtrl+Cキーを押す。

　あとで出力先をdist/からdocs/に変える。GitHubPagesで表示するために。なのでdist/ディレクトリは削除する。

rm -r dist

4. コマンドを確認する

　viteのコマンドを確認する。ここは読み飛ばしてもいい。

4-1. バージョン確認

npx vite --version

vite/2.9.1 linux-arm node-v16.14.2

4-2. ヘルプ確認

npx vite --help

ヘルプ内容

vite/2.9.1

Usage:
  $ vite [root]

Commands:
  [root]           start dev server
  build [root]     build for production
  optimize [root]  pre-bundle dependencies
  preview [root]   locally preview production build

For more info, run any command with the `--help` flag:
  $ vite --help
  $ vite build --help
  $ vite optimize --help
  $ vite preview --help

Options:
  --host [host]           [string] specify hostname 
  --port <port>           [number] specify port 
  --https                 [boolean] use TLS + HTTP/2 
  --open [path]           [boolean | string] open browser on startup 
  --cors                  [boolean] enable CORS 
  --strictPort            [boolean] exit if specified port is already in use 
  --force                 [boolean] force the optimizer to ignore the cache and re-bundle 
  -c, --config <file>     [string] use specified config file 
  --base <path>           [string] public base path (default: /) 
  -l, --logLevel <level>  [string] info | warn | error | silent 
  --clearScreen           [boolean] allow/disable clear screen when logging 
  -d, --debug [feat]      [string | boolean] show debug logs 
  -f, --filter <filter>   [string] filter debug logs 
  -m, --mode <mode>       [string] set env mode 
  -h, --help              Display this message 
  -v, --version           Display version number

5. 設定する

　任意のディレクトリ構造をつくる。今回はGitHubのリポジトリやPagesで表示するのに最適化する。

5-1. 設定ファイルを作成する

touch vite.config.js

5-2. 設定ファイルを書く

module.exports = {
  root: 'src',
  base: 'https://ytyaru.github.io/NoBundler.Vite.Setting.HelloWorld.20220406102234/',
  build: {
    outDir: '../docs'
  }
}

　詳細はvite configを参照。

キー	概要
`root`	`index.html`があるパス
`base`	デプロイ先のベースURL
`build.outDir`	ビルド先ディレクトリ

　今回はGitHub Pagesにアップロードする。その仕様に従って設定した。

　baseは以下のような書式である。

https://{GitHubユーザ名}.github.io/{GitHubリポジトリ名}/'

　outDirをdocs/にしたのもGitHub Pagesの仕様だ。のちほどアップロード後にGitHubページのほうでも設定が必要になる。

5-3. ビルド＆プレビューする

5-3-1. ソースコードを配置する

　初回生成されたソースコードを、src/ディレクトリ配下へ移動する。

mkdir -p src
mv favicon.svg src/favicon.svg  
mv index.html src/index.html
mv main.js src/main.js
mv style.css src/style.css

　以下のようになっているはず。

$ ls
docs  node_modules  package-lock.json  package.json  src  vite.config.js
$ ls src
favicon.svg  index.html  main.js  style.css

5-3-2. ビルド＆プレビューする

npm run build
npm run preview

　以下のようになっているはず。

$ ls docs/
assets  index.html

6. アップロードする

　GitHubにpushする。

7. GitHub Pagesで表示する

ブラウザでリポジトリのページへ遷移する
setting→pagesメニューを開く
SourceでBranchをmasterにする
folderをdocs/にする
saveボタンを押す
しばらくするとビルドが完了するのでアクセスする（URLはすぐ上に表示される。ready状態だとまだビルドが終わらず404になる。published状態ならビルド完了なので正常に表示される）

　私のアカウントで配置したものが以下。

DEMO

対象環境

2022-04-06
Raspbierry pi 4 Model B
Raspberry Pi OS buster 10.0 2020-08-20 ※
bash 5.0.3(1)-release
Node.js 16.14.2
npm 8.5.0

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

やってみる

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

Vite 2.9.1 最速HelloWorld＋GitHubPages

成果物

目次

1. 前提

1-1. 情報源

2. プロジェクトを作成する

2-1. 確認

2-1-1. プロジェクト名