Help us understand the problem. What is going on with this article?

ニッチかもしれないフロントエンド向けGitHub Template

GitHub Templateというのを見つけてしまったので

元々個人用のボイラープレート的なものとして、ちょいちょい使う構成を保存しておこうと思ったのが始まりでした。
ところがこんなのを見つけてしまったので。

「GitHubでは既存のRepositoryをTemplateとして、新しいRepositoryを作成することができる」
https://dev.classmethod.jp/articles/github-template-repository/

ということで個人で使う構成をテンプレートリポジトリとしてpublicにしましたので、こんな構成を使うという奇特な方はどうぞご利用ください。
同じような構成で作る場合の参考にしていただいてもいいと思います。
(実際動くまでにはそれなりに詰まったので)

共通条件

  • IE11対応(一応サンプルソースでの動作確認済)
  • dev/prodを同時出力(最近の仕事上その方が都合いいので)
  • Polyfill.ioさん本当にありがとうございます
  • babel様様
  • scssを変換してPostCssでAutoprefixer

基本的なWeb構成

template_webpack_web
template_rollup_web

一般的かは知らない。
現時点でのディレクトリ構成は以下のような感じ(今後変更する可能性はある)

template/
├ assets/
│   ├ js/
│   └ css/
├ src/
│   ├ js_src/
│   │    ├ js_util/
│   │    │      └ util.js
│   │    └ main.js
│   └ css_src/
│        ├ css_util/
│        │      └ util.css
│        └ main.css
├ index.html
└ (config類)

基本的なWeb構成(だけどビルド分割)

template_webpack_web_separate
template_rollup_web_separate

JSとCSSを別のconfigで切ってある。
JSだけとかCSSだけ使う場合のピックアップ用。
構成は前項と同様。

svelte構成

template_webpack_svelte
template_rollup_svelte

すごく楽なのでもっと広まるといいと思うsvelte。
現時点でのディレクトリ構成は以下のような感じ(今後変更する可能性はある)

template/
├ assets/
│   ├ js/
│   └ css/
├ src/
│   ├ svelte.js
│   └ App.svelte
├ index.html
└ (config類)

今後

必要に応じて増えたり変わったりするかもしれません。
合理的なツッコミは是非お待ちしております。
あと、タグに何を入れるべきか悩ましい。

caf2for4
のんびり系フリーエンジニア。プログラマーとしてはかなり後発だけど、それまでのカオスな仕事経験を糧に頑張ってます。基本と絡ませて身近な問題を解決していくのが楽しい。難しい話は他の人にお任せします。。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away