最新フロントエンドビルドツールといわれるviteを使ってみました!フロントエンドエンジニアの方は必見です!
業務でReactやVueを使っている方で、導入していない方は、業務改善につながるかもしれません。
爆速で快適に使うことができたので、ぜひ試してみてくださいね。
![](https://jiji.blog/wp-content/uploads/2022/04/me.png)
使いやすいので、ぜひぜひ使ってみてね
viteとは
![](https://jiji.blog/wp-content/uploads/cocoon-resources/blog-card-cache/372e2c4526eaeb663afae5824728a4cb.png)
vite(ヴィート: フランス語で素早い)は、簡単に素早く開発サーバを構築することができる、ビルドツールです。
以前three.jsを使おうとした時に、viteで開発サーバを立てられることを知りました。とても便利だったので、どんな感じに導入するのか簡単に手順をシェアしたいと思います。
viteプロジェクトのドキュメントをみる
![](https://jiji.blog/wp-content/uploads/cocoon-resources/blog-card-cache/372e2c4526eaeb663afae5824728a4cb.png)
こちらにある手順を踏みたいと思います。
viteプロジェクトを作成する
私はyarn
を普段から使っているのでyarn
でセットアップします。
画面進行に従う
とりあえず、開発サーバを立ててみたいので、ここは適当にFrameworkはReaxtとTypeScriptを選択してみました。
![vp-tmnl](https://jiji.blog/wp-content/uploads/2024/02/vp-tmnl.png)
こんな感じ!簡単ですね。
成果物は以下より。
開発サーバを起動してみる
さて、どう開発サーバを起動してみるかなと思い、生成されたpackage.jsonを覗いてみると。
{
"scripts": {
"dev": "vite", // 開発サーバーを起動。エイリアス: `vite dev`, `vite serve`
"build": "vite build", // プロダクション用にビルド
"preview": "vite preview" // プロダクション用ビルドをローカルでプレビュー
}
}
どうやら以下のコマンドで走ることができそう。
できた!
![vp-dev](https://jiji.blog/wp-content/uploads/2024/02/vp-dev-1024x525.png)
![](https://jiji.blog/wp-content/uploads/2022/04/me.png)
とっても簡単だ〜
し、か、も、ファイルをちょっといじいじしてみて、保存をするとリアルタイムで開発サーバ側にもすぐに反映されました!
とても便利ですね。開発が捗りそう!
おまけ: プロダクション用ビルド
package.jsonを見ていると、他にも気になるコマンドを見つけました。
{
"scripts": {
"dev": "vite", // 開発サーバーを起動。エイリアス: `vite dev`, `vite serve`
"build": "vite build", // プロダクション用にビルド
"preview": "vite preview" // プロダクション用ビルドをローカルでプレビュー
}
}
build
とpreview
を実行してみると、、
プロダクション用成果物をローカルでプレビューすることができます。
ちなみに--host
オプションをつけてあげると、同じネットワークに繋がってる他のデバイスからも接続ができました。
まとめ
簡単に開発サーバをローカルで立てることができました。
vite便利ですね!皆さんもぜひ使ってみてください。
![](https://jiji.blog/wp-content/uploads/2022/04/me.png)
にほんブログ村に参加しております!よろしければクリックお願いします 🙂
![にほんブログ村 IT技術ブログへ](https://b.blogmura.com/it/88_31.gif)
にほんブログ村
コメント