生産性向上のための環境整備2020 【PR】 Lenovo Advent Calendar 2020の15日目の記事です。
はじめに
Reactや、Vuejsなどのモダンな開発環境では、linterやビルドツールは簡単に導入できます。
しかし、VueやReactなしの環境でlinterやビルドツールを導入するとなると、
なかなかまとまっている記事がないため、環境を準備するのに時間がかかってしまいます。
かといって、それらを導入せずに開発を行うと、普段と違って生のCSSを書くのに苦戦したり、linterで防げていたミスなどが頻発してしまいます。
それらを解決するために、レガシーな環境でも、できるだけReactやVuejsに負けないDXの環境を作ってみました。
ディレクトリ構成
ディレクトリ構成は以下のようになっています。
基本的に、ビルド対象は、srcに格納し、.cache(開発時)またはdest(リリース時)ディレクトリに出力するようになっています。
ProjectRoot/
├ .cache/ ・・・ 開発用ビルド結果出力ディレクトリ
│ src内の資産がビルドされた結果の資産が格納される
├ dest/ ・・・ リリース資産出力ディレクトリ
│ public内の資産(.から始まるファイルは除く)がコピーされたもの
│ + src内の資産がビルドされた結果の資産が格納される
├ node_modules/ ・・・ npmでインストールしたパッケージの格納ディレクトリ
├ public/ ・・・ 静的資産配置ディレクトリ
│ ビルド対象とならない、HTMLや画像、ライブラリなどを配置する
├ src/ ・・・ 開発用資産配置ディレクトリ
│ ビルド対象となるstyleなどを配置する
├ .bs-config.js ・・・ Browsersync(開発用ローカルサーバ)設定ファイル
├ .browserslistrc ・・・ browserslist設定ファイル
├ .editorconfig ・・・ editorconfig設定ファイル
├ .eslintignore ・・・ ESLint除外設定ファイル
├ .eslintrc.js ・・・ ESLint(JS用のlinter)設定ファイル
├ .gitattributes ・・・ Git設定ファイル
├ .gitignore ・・・ Git除外設定ファイル
├ .postcssrc.js ・・・ PostCSS設定ファイル
├ .prettierignore ・・・ Prettier除外設定ファイル
├ .prettierrc.js ・・・ Prettier(コードフォーマッター)設定ファイル
├ .stylelintignore ・・・ stylelint除外設定ファイル
├ .stylelintrc.js ・・・ stylelint(css用のlinter)設定ファイル
├ LICENSE
├ package-lock.json
├ package.json
└ README.md
使い方
事前準備
この環境は、Node.jsを利用しますので、インストールしておいてください。
また、バージョン管理ツールとしてGitを利用することを想定しています。
補足
Node.jsの普通のインストーラーを使ってもいいですが、nodenvなどのバージョン管理ツールを使うことを推奨します。
※普通にインストールすると案件毎にバージョンが異なる場合につらい思いをするため
ダウンロード&実行
コンソールで以下のコマンドを実行します。
# 環境のダウンロード
% git clone https://github.com/ohnaka0410/web-starter-kit.git
% cd web-starter-kit
# 初期構築
% npm ci
# 開発サーバ起動(２回目以降はこれだけで大丈夫)
% npm run serve
表示確認
ブラウザで以下のURLを開けばページが確認できます。
http://localhost:3000
リポジトリ
まとめ
11tyやsass、babelを使いたい方など、案件や好みによって環境は多少変わってきますが、
使いたいpackageをインストールしたあと、package.jsonにsrcからdestに出力するように少し追記するだけで
簡単に使えるようになりますので、自分なりにカスタマイズして、快適に開発していただければと思います