序文Vite2 のリリースと安定性の向上により、ますます多くのプロジェクトがそれを使用しようとしています。 Vite を使用する場合、通常は次のコマンドを使用してプロジェクトを作成します。 // npm を使用する npm init @vitejs/app // 糸を使う 糸作成@vitejs/app // プロジェクト名を指定して特定のフレームワークのテンプレートを使用する場合は、次のようにします // npm vue.js のテンプレートファイル //糸 糸作成 @vitejs/app my-vue-app --template vue これらのコマンドを実行すると、プロジェクト フォルダーが生成されます。ほとんどの人にとっては、通常どおりプロジェクトを作成するだけで十分かもしれませんが、これらのコマンドを実行するとプロジェクト フォルダーが生成される理由が気になります。ここでは、プロジェクトを作成する例として糸を取り上げます。 yarn create は何をしますか?多くのプロジェクトが yarn create コマンドを使用して作成されるのはなぜかと疑問に思う人も多いかもしれません。ここでは、Vite に加えて、同じ方法で React プロジェクトを作成します: 糸グローバル追加create-react-app React アプリの作成、私のアプリ 糸の作成の詳細については、こちらをご覧ください ソースコード分析
template で始まるフォルダーはすべて、さまざまなフレームワークと対応する TypeScript バージョンのプロジェクト テンプレートです。これらについてはあまり心配する必要はありません。プロジェクトを作成するロジックはすべて index.js ファイルにあります。ここで何が行われているか見てみましょう プロジェクトの依存関係1つ目は依存関係の導入です 定数 fs = require('fs') 定数パス = require('path') const argv = require('minimist')(process.argv.slice(2)) const プロンプト = require('プロンプト') 定数{ 黄色、 緑、 シアン、 青、 マゼンタ、 ライトレッド、 赤 } = 'コロリスト' が必要です fs と path は Nodejs の組み込みモジュールですが、minimist、prompts、kolorist はそれぞれサードパーティの依存ライブラリです。
テンプレート構成次に、さまざまなフレームワーク テンプレートの構成ファイルが生成され、最後にテンプレート名の配列が生成されます。 // ここでは、vue と react フレームワークの設定のみを記述します。他の設定はそれほど違いはありません。興味がある場合は、ソース コードを参照してください。 const フレームワーク = [ ...... { 名前: 'vue', 色: 緑、 バリエーション: [ { 名前: 'vue', 表示: 'JavaScript', 色: 黄色 }, { 名前: 'vue-ts'、 表示: 'TypeScript', 色: 青 } ] }, { 名前: 'react', 色: シアン、 バリエーション: [ { 名前: 'react', 表示: 'JavaScript', 色: 黄色 }, { 名前: 'react-ts'、 表示: 'TypeScript', 色: 青 } ] }, ...... ] // 出力テンプレート名リスト const TEMPLATES = FRAMEWORKS.map( (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name] ).reduce((a, b) => a.concat(b), []) 次に、.gitignore ファイルの特殊性により、各フレームワーク プロジェクト テンプレートの下に最初に _gitignore ファイルが作成され、後でプロジェクトが作成されるときに .gitignore に置き換えられます。したがって、名前を変更する必要があるファイルを格納するためのオブジェクトがコード内に事前定義されます。 const renameFiles = { _gitignore: '.gitignore' } ユーティリティ関数コア機能について説明する前に、コードで定義されているツール機能を見てみましょう。最も重要なのは、ファイル操作に関連する 3 つの関数です。 コピー関数コピー(src, dest) { 定数 stat = fs.statSync(src) (stat.isDirectory())の場合{ copyDir(ソース、宛先) } それ以外 { fs.copyFileSync(ソース、宛先) } } コピー関数は、ファイルまたはフォルダー src を指定されたフォルダー dest にコピーするために使用されます。まず、src のステータス stat を取得します。src がフォルダーの場合、つまり stat.isDirectory() が true の場合は、以下で紹介する copyDir 関数を呼び出して、src フォルダー内のファイルを dest フォルダーにコピーします。逆に、src がファイルの場合は、fs.copyFileSync 関数が直接呼び出され、src ファイルが dest フォルダーにコピーされます。 コピーディレクトリ関数 copyDir(srcDir, destDir) { fs.mkdirSync(destDir, { 再帰: true }) for (const file of fs.readdirSync(srcDir)) { const srcFile = path.resolve(srcDir, ファイル) const destFile = path.resolve(destDir, ファイル) コピー(srcFile, destFile) } } copyDir 関数は、フォルダー srcDir 内のファイルを指定されたフォルダー destDir にコピーするために使用されます。まず、fs.mkdirSync 関数を呼び出して指定されたフォルダーを作成し、次に fs.readdirSync を呼び出して srcDir フォルダーからファイルを取得し、それらを 1 つずつ走査してコピーします。最後に、copy 関数を呼び出してコピーします。フォルダー内にファイルまたはフォルダーが存在する可能性があるため、ここで再帰が使用されます。 空のディレクトリ関数emptyDir(dir) { fs.existsSync(dir) が存在する場合 { 戻る } for (const file of fs.readdirSync(dir)) { const abs = path.resolve(dir, ファイル) if (fs.lstatSync(abs).isDirectory()) { 空のディレクトリ(abs) fs.rmdirSync(絶対値) } それ以外 { fs.unlinkSync(abs) } } } emptyDir 関数は、dir フォルダーの下のコードをクリアするために使用されます。まず、dir フォルダーが存在するかどうかを判断します。存在する場合は、フォルダー内のファイルを走査し、ファイルのパス abs を構築します。abs がフォルダーの場合、emptyDir 関数を再帰的に呼び出してフォルダー内のファイルを削除し、次に fs.rmdirSync を呼び出してフォルダーを削除します。abs がファイルの場合、fs.unlinkSync 関数を呼び出してファイルを削除します。 コア機能次は、コア機能を実装する init 関数です。 コマンドライン操作とフォルダの作成最初のステップはコマンドラインパラメータを取得することです targetDir = argv._[0]とします。 テンプレートをargv.templateとします || argv.t const defaultProjectName = !targetDir ? 'vite-project' : targetDir argv._[0]は@vitejs/appの後の最初のパラメータを表します。 具体的なコードは次のとおりです。 // コマンドラインインタラクションに関するコードはここにすべて記載されていません。興味があればソースコードを参照してください。let result = {} 結果 = プロンプトを待つ( [ { タイプ: targetDir ? null: 'text', 名前: 'プロジェクト名', メッセージ: 'プロジェクト名:', 初期値: defaultProjectName、 onState: (状態) => (targetDir = state.value.trim() || defaultProjectName) }, ...... ] ) const { フレームワーク、上書き、パッケージ名、バリアント } = 結果 定数ルート = path.join(cwd, targetDir) if (上書き) { 空のディレクトリ(ルート) } そうでない場合 (!fs.existsSync(root)) { fs.mkdirSync(ルート) } テンプレート = バリアント || フレームワーク || テンプレート // プロジェクト フォルダーのパスを出力します console.log(`\n${root} 内のスキャフォールディング プロジェクト...`) const templateDir = path.join(__dirname, `template-${template}`) 選考が完了すると、選考結果が返されます ファイルへの書き込みconst write = (ファイル、コンテンツ) => { const targetPath = renameFiles[ファイル] ? path.join(ルート、renameFiles[ファイル]) : パス.join(ルート、ファイル) if (コンテンツ) { fs.writeFileSync(ターゲットパス、コンテンツ) } それ以外 { コピー(path.join(templateDir, file), targetPath) } } const ファイル = fs.readdirSync(templateDir) for (const file of files.filter((f) => f !== 'package.json')) { 書き込み(ファイル) } const pkg = require(path.join(templateDir, `package.json`)) pkg.name = パッケージ名 書き込み('package.json'、JSON.stringify(pkg、null、2)) const pkgManager = /yarn/.test(process.env.npm_execpath) ? 'yarn' : 'npm' // プロジェクトが作成されたことを通知するプロンプトを出力し、次にプロジェクトを開始するために実行する必要があるコマンドを通知します console.log(`\n完了しました。次に実行します:\n`) (ルート!== cwd)の場合{ console.log(` cd ${path.relative(cwd, root)}`) } console.log(` ${pkgManager === 'yarn' ? `yarn` : `npm install`}`) console.log(` ${pkgManager === 'yarn' ? `yarn dev` : `npm run dev`}`) コンソールログ() 書き込み関数は、ファイルとコンテンツの 2 つのパラメータを受け入れ、次の 2 つの機能を持ちます。
次に、fs.readdirSync を呼び出してテンプレート フォルダー内のファイルを読み取り、それらを 1 つずつ走査してプロジェクト フォルダーにコピーします (package.json ファイルは、名前フィールドを変更する必要があるためフィルター処理されます)。最後に、package.json ファイルに書き込みます。 まとめVite の create-app パッケージの実装には約 320 行のコードしかありませんが、さまざまなシナリオの互換性が考慮されており、これを学習すれば、このような CLI ツールを自分で実装することは難しくありません。 Viteプロジェクト作成の実装手順に関するこの記事はこれで終わりです。より関連性の高いViteプロジェクト作成コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL Workbenchのダウンロードと使用方法のチュートリアルの詳細な説明
>>: MySQL5.7+ MySQL Workbenchのインストールと設定方法のグラフィックチュートリアル(MAC)
この記事では主に CentOS 上で MySQL マスタースレーブサーバーを構築する方法を紹介します...
この記事は、@C7210 によって翻訳されたブログ「Usability Counts」からの翻訳です...
zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...
この記事の例では、jQueryのカスタム虫眼鏡効果の具体的なコードを参考までに共有しています。具体的...
Zabbix独自のWEBインターフェースを例に、Web監視の設定を行います。環境: zabbix4....
1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...
目次1. パッケージングツールでのカスタムインポート2. ブラウザとバンドラの共通インポート構文3....
<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...
序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
目次序文原因分析と解決策スケジュールされたタスクを迅速に実行する要約する序文データベースのスケジュー...
Google Chinaは、ウェブサイトやブログを素早く簡単に多言語化できる翻訳ツールをリリースした...
新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...
1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...
Linux で実行可能プログラムまたは so の依存ライブラリを表示します。 Linux の実行可能...