13,000
回編集
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]] |