フロントエンドツールBootstrap、NPM、Yarn

Bootstrap

プロジェクトは、プレゼンテーションアプリケーションのフロントエンドフレームワークとしてBootstrapを使用します.Bootstrapは、Twitterの2人のエンジニアMark OttoとJacob Thorntonが2011年にオープンソースしたWebフロントエンドフレームワークです.Bootstrapの公式ドキュメント.
Laravelプロジェクトのデフォルトでは、Bootstrapフロントエンドフレームワークが統合されていますが、正常に使用できるようにするには、一定の構成が必要です.
BootstrapはNPM拡張パッケージとしてLaravelプロジェクトに統合されている.

NPM

NPMはノードです.js(Google V 8エンジンベースのJavaScript実行環境)のパッケージ管理と配布ツール.参考読書:npmは何をしていますか.(チュートリアル以外)
Composerのいくつかの概念もNPMから参考にしたので、NPMにもcomposerのようなものがある.json文のpackage.jsonファイル、Laravelのデフォルトでは、新しいプロジェクトごとに自動的にファイルが生成され、ファイル内に一般的な拡張パッケージがデフォルトで統合されます.
Laravelのデフォルトでは、NPM拡張パッケージがいくつか統合されています.ポイントは以下のとおりです.

bootstrap-sass-Bootstrap NPM拡張パッケージ;

jquery-jQuery NPM拡張パッケージ;

laravel-mix--Laravelが公式に提供した静的資源管理ツール.

vue —— VUE.jsフロントエンドフレーム;

これらの拡張パッケージは、Laravelに完全なフロントエンドワークフローを提供します.

Yarn

NPMを使用してこれらの拡張パッケージをインストールすることができますが、NPMのインストール速度、安全性、安定性などが開発者から非難されているため、Facebookが2016年10月にオープンしたYarnをNPMの代替品として使用しています.
Yarnを使用して拡張パッケージをインストールするには、プロジェクトルートディレクトリで次のコマンドを実行します.$ yarn install --no-bin-links
カスタマイズされたHomesteadインストールパッケージでは、デフォルトではYarnが統合されているため、Yarnの再インストールを行う必要はありません.具体的なインストール方法を知りたい場合は、Yarnの公式インストールドキュメントを参照してください.

Bootstrapのインポート

Laravelのデフォルトで生成されたapp.scssファイルを編集し、このファイルのすべての内容を削除し、次の行だけを残して、Bootstrapをインポートします.
resources/assets/sass/app.scss

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

.scssはSass(CSS開発ツール)専用のファイル形式です.