Create Branch
Back to Blog

メモ - srcとdistディレクトの役割

Published on 2024年10月30日

メモ
  1. src（ソース）ディレクトリ
  • 開発者が直接編集するコード置き場
  • 人間が読みやすい形式で書かれている
  • コンパイル/ビルド前の元となるコード置き場
// src/App.jsx
import React from 'react';
import './styles.scss';

export function App() {
  const message = "Hello World";
  return <h1>{message}</h1>;
}
  1. dist（配布）ディレクトリ
  • ブラウザで実行される最終的なファイル置き場
  • コンパイル・最適化済みのコード
// dist/app.min.js
"use strict";!function(){var e="Hello World";document.getElementById("app").innerHTML="<h1>"+e+"</h1>"}();
  1. 変換の流れ：
src/ （開発者が編集） 
　　　　↓
ビルドプロセス（コンパイル・最適化）
　　　　↓
dist/ （ブラウザで実行）

簡単に言えば：

  • src = 開発者の作業場
  • dist = 完成品の展示場所

人間の作業に例えると：

  • src = レシピと材料（料理の作り方）
  • dist = 出来上がった料理（お客様に提供するもの）

このように、srcは開発用、distは配信用という明確な役割の違いがあります。

参照

hirotobeat