フロントエンドフレームワーク雛形作成ツールのディレクトリ構成

概要

新しいプロジェクトを始めるときに、ディレクトリ構成やファイル名って悩みますよね。
React, Vue, Angularの雛形作成ツールが作成するプロジェクトが、どんなディレクトリ構成を出力するのか簡単に調べてみました。
ビルド出力がどのディレクトリに書き出されるか確認するために、 yarn build などのコマンドを実行後の結果となっています。
それぞれのツールで選択した機能は、特に記載しません。

treeコマンド

ディレクトリ構成の確認は、treeコマンドでおこないます。
$ tree -I "node_modules|.git" -a
node_modulesと.gitディレクトリを除外し、不可視ファイルを表示します。

vue-cli

Vue CLI

.
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── dist
│   └── (省略)
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tests
│   └── unit
│       ├── .eslintrc.js
│       └── example.spec.js
└── yarn.lock

create-react-app

Create React App · Set up a modern web app by running one command.

.
├── .gitignore
├── README.md
├── build
│   └── (省略)
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

angular-cli

Angular CLI

.
├── .editorconfig
├── .gitignore
├── README.md
├── angular.json
├── browserslist
├── dist
│   └── angular
│       └── (省略)
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   │   └── .gitkeep
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json

所感

ビルド出力はdistやbuildで、ビルド対象はsrcの中という感じでした。
プロジェクトの拡張にあわせて、srcにサブディレクトリを追加していくのが良さそうです。
個人的には少し意外だったのは、assetsが主に画像ディレクトリとして使われることでしょうか。
（昔はsrcと同じような扱いだったはず・・・。NuxtJSとかの影響なのかな？ アセット - NuxtJS）

VSCodeのアイコン拡張機能のフォルダ名のルールとかも見てみると面白いかもしれません。
ListOfFolders · vscode-icons/vscode-icons Wiki · GitHub