레거시 정적 사이트를 만드는 환경의 보일러 플레이트를 만들어 보았습니다.

생산성 향상을 위한 환경 정비 2020 【PR】 Lenovo Advent Calendar 2020 의 15일째의 기사입니다.

소개

React와 Vuejs와 같은 현대적인 개발 환경에서는 linter와 빌드 도구를 쉽게 도입 할 수 있습니다.
그러나 Vue 나 React가없는 환경에서 linter 및 빌드 도구를 도입하면,
좀처럼 모여있는 기사가 없기 때문에 환경을 준비하는 데 시간이 걸립니다.
그렇다고 그들을 도입하지 않고 개발을하면 평소와 달리 원시 CSS를 쓰는데 고전하거나 린터로 막고 있던 실수 등이 자주 발생합니다.
이를 해결하기 위해 레거시 환경에서도 가능한 한 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와 같은 버전 관리 도구를 사용하는 것이 좋습니다.
※ 보통 설치하면 사건마다 버전이 다른 경우에 어려움을주기 위해

다운로드 및 실행

콘솔에서 다음 명령을 실행합니다.

console

# 環境のダウンロード
% git clone https://github.com/ohnaka0410/web-starter-kit.git
% cd web-starter-kit
# 初期構築
% npm ci
# 開発サーバ起動(２回目以降はこれだけで大丈夫)
% npm run serve

표시 확인

브라우저에서 다음 URL을 열면 페이지를 확인할 수 있습니다.

http://localhost:3000

리포지토리

ohnaka0410/web-starter-kit

요약

11ty나 sass, babel을 사용하고 싶은 분 등, 안건이나 취향에 따라 환경은 다소 바뀌어 옵니다만,
사용하고 싶은 package를 인스톨 한 뒤, package.json에 src 로부터 dest쉽게 사용할 수 있기 때문에 나름대로 사용자 정의하고 편안하게 개발할 수 있다고 생각합니다