Vite試してみた

2022年4月30日 15:22

ビルドするのが瞬殺なVite環境を試しにつくってみました。
今回、以下フォルダ構成のものを作成しました。複数ページやテンプレートエンジンに対応できるように試みましたが、うまくいかず一旦断念。。
いずれ挑戦します

プロジェクト作成手順

①プロジェクト作成に下記コマンド入力(npmの場合)

npm init vite@latest

②「プロジェクト名」の入力、「フレームワーク」「テンプレート」の選択

? Project name: › hello-vite
? 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

③ ②終了後は以下フォルダ構成が作られると思います。
今回は最終的なフォルダ構成にするために少しばかり変更します。

④ scssを使用できるようにインストール

npm i -D sass

フォルダ構成変更

①vite-project直下にsrcフォルダを設置

・main.js内に書かれているimport './style.css'の読み込みをindex.htmlから読み込むようにする(コード6行目追加)
＊scssファイルの読み込みでviteが自動で読み込んでくれる

・main.jsの読み込みのパス変更(コード12行目)

1 <!DOCTYPE html>
2 <html lang="en">
3   <head>
4     <meta charset="UTF-8" />
5     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
6     <link rel="stylesheet" href="./assets/css/style.scss">
7     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8     <title>Vite App</title>
9   </head>
10  <body>
11   <div id="app"></div>
12   <script type="module" src="./assets/js/main.js"></script>
13  </body>
14 </html>

②vite.config.jsに設定を記載

root: 'src' /* srcフォルダをルートとしたビルド対象 */
server: {
  host: true,  /* localhostをIPアドレスでも表示可能にする */
  port: 8888,  /* port番号を変更する */
},
build: {
  outDir: '../dist'  /* ビルド後のフォルダ場所と名前を設定 */
}

まとめ

複数ページだったり、PugやNunjucksのようなテンプレートエンジンを使えるように挑戦したものの、今回は上手くできなかったので余裕ができたらまた挑戦しようと思います😅

参考記事

この記事が気に入ったらサポートをしてみませんか？