なぜあなたはVITEを使用する必要があります

導入

最近、私はVite そして、私はVITEがどれくらい速く見えたかについて驚きました.それで、今日、我々は方法と理由を話します.私たちは、新しいVITEプロジェクトを設定するのがいかに簡単であるかを確認します.また、他のバンドルと共に使用するように依存関係を使用することもできます.そして最後に、VITEプロジェクトをどのように展開するかを簡単に見ることができます.

Viteとは

VITEは次世代フロントエンドツーリングエヴァンあなた(また、誰がVuejsを作成)によって作成されます.それは他のモジュールのバンドル(小包、webpackなど)からそれを分離するいくつかの素晴らしい機能があります.

機能

💡 インスタントサーバー起動
ネイティブESMを介して提供オンデマンドファイルは、必要ないバンドル!
⚡️ ライトニングファスト
ホットモジュール置換(HMR)は、高速に関係なく、アプリケーションのサイズのまま.
🛠️ 豊富な機能
TypeScript、JSX、CSSなどのボックスをサポートします.
📦 最適化ビルド
事前に設定されたロールアップは、マルチページとライブラリモードのサポートをビルドします.
🔩 ユニバーサルプラグイン
rolup supersetプラグインのインターフェイスをdevとbuildの間で共有.
🔑 完全型API
完全なタイプスクリプト入力による柔軟なプログラムAPI

新しいプロジェクト設定

NPMで

npm init @vitejs/app

糸で

yarn create @vitejs/app

次に、プロジェクトに名前を付け、あなたがプロジェクトを構築したいスタックを選択すると、多くのオプションがあります.チュートリアルでは、バニラJSを使用します.

? Select a framework:
> *vanilla*
 > *vanilla*
   vanilla ts
vue
react
react
preact
lit-element
svelte

次に、そのフォルダにディレクトリを変更し、ノードモジュールをインストールし、devサーバーを起動します.

cd *your project name*
npm install
npm run dev

そして、あなたのプロジェクトは首尾よくViteを使用して作成されました、そして、あなたはすでにどのくらいの速さがパーセルまたはウェブパックと比較して、Viteでプロジェクトを作成することであることに気がつきました.

フォルダ構造

我々がVITEプロジェクトのフォルダ構造について話すならば、そのかなり単純な

我々は、タッチする必要はありませんNodeRoundモジュールフォルダを持っている

それからインデックスがあります.HTMLファイル、メイン.JSファイルとスタイル.CSSファイル

お気軽にプロジェクト内の任意のファイルを削除してください.

インデックス.HTMLファイル

あなたはそのインデックスを見ることができます.HTMLはどんなモジュールバンドルと同じように使用します.しかし、スクリプトタグには、type =“module”という新しいプロパティがあります.ファイルを構築するためにESMを使用するので、プロジェクト内のすべてのスクリプトタグでそれを行う必要があります.インデックスを移動しないでください.ルートディレクトリからのHTMLファイル.また、<div id="app'></div> .

メイン.jsファイル

import './style.css' すべてのCSSスタイリングをインデックスにインポートします.メインファイルを介してメイン.js注意:削除した場合<div id="app'></div> それから、あなたはファイルを除くすべてを削除する必要がありますimport './style.css'

. envファイル

.env ファイルは、APIキーのようなユーザーからプライベートな何かを確保するのに役立つ環境変数です.VITEは特別なEV変数を公開しますimport.meta.env オブジェクト.では、ファイルを作成しましょう.プロジェクトのルートディレクトリのenv.Vite公式ドキュメンテーションページはVITEでENV変数を起動すると言います

マルチページ

プロジェクトに複数のHTMLファイルがある場合は、VITEというファイルを作成する必要があります.設定.あなたのルートディレクトリのjsと以下の構成を加えてください.

const { resolve } = require('path')

module.exports = {
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        *your page name*: resolve(__dirname, *your page directory*)
      }
    }
  }
}

そして、あなたは下記のようにあなたのページに行くことができます.注意:ページの名前は、vite.config.js ファイル.

JavaScriptファイル内の画像をインポートする

JavaScriptファイル内の資産をインポートするには、以下の手順を実行する必要があります.私はあなたが何かを書くことができますIMGを書いてここにインポート名に任意の名前を与えることができます.

建築生産

すべてのファイルをビルドするには、端末に入力する必要がありますnpm run dev そして、それはあなたのルートディレクトリにdistフォルダを作成します、そして、あなたは簡単にN - Dropをドラッグするか、それをあなたのGitHubページまたはNetlifyにプッシュすることができます.

結論

私たちはどのようにVITE、フォルダーの構造、JavaScriptファイル内のイメージをインポートするには、envファイルとはるかに自分の非常にプロジェクトを設定する方法について話している.詳細については、私もVITEについて学んだViteのドキュメントページに行くことができます.VITEがかなり新しいので、VITEのYouTubeビデオがありませんでした.ドキュメントを読むと、本当にブログやビデオよりも多くを理解することができます.VITEを試してみてください、そして、あなたがViteでどんな問題を持っているか、私が知っていなければならない何かを知っているならば、コメントダウンしてください.