「Laravel - Laravelの構造」の版間の差分

ナビゲーションに移動 検索に移動
32行目: 32行目:
<br><br>
<br><br>


== resourcesディレクトリとpublicディレクトリの違い ==
==== resources ディレクトリ ====
ソースコードを配置する場所であり、コンパイル / バンドル前のファイルが置かれる。<br>
Sass, TypeScript, モダンなJavaScript (ES6+) 等の開発用コードを配置する。<br>
<br>
また、npmパッケージからインポートしたコードも含める。<br>
<br>
これは、Vite / Webpackにより処理される前の状態である。<br>
<br>
==== publicディレクトリ ====
Webブラウザから直接アクセス可能なファイルを配置する。<br>
Webブラウザが解釈できる形式 (通常のCSS, ES5 JavaScript)<br>
<br>
コンパイル / バンドル済みのファイルである。<br>
(最適化・圧縮済みの本番向けのコード等)<br>
(アセットのビルド後の出力先)<br>
<br>
==== 具体例 ====
<syntaxhighlight lang="scss">
// resources/css/app.scss
@import 'variables';
.button {
  @apply bg-blue-500;
  &:hover {
    @apply bg-blue-600;
  }
}
</syntaxhighlight>
<br>
<syntaxhighlight lang="scss">
// public/css/app.css (コンパイル後)
.button {
  background-color: #3b82f6;
}
.button:hover {
  background-color: #2563eb;
}
</syntaxhighlight>
<br>
===== 開発フロー =====
# resources 下で開発を行う。
# vite build / npm run build でコンパイル。
# 結果がpublicディレクトリに出力される。
# publicのファイルがWebサーバから配信される。
<br>
resourcesは開発向け、publicは本番配信向けという役割の違いがある。<br>
<br><br>
{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}


__FORCETOC__
__FORCETOC__
[[カテゴリ:Web]]
[[カテゴリ:Web]]

案内メニュー