A boilerplate of Vanilla-JavaScript, SCSS with Webpack 4
- とりあえず JavaScript のコードだけを書き進められる環境を構築。
- ファイルの変更を検知し、ブラウザが自動でリロードされる。
- .env ファイルの設定をしているので、環境毎に値を変える必要がある部分は env ディレクトリ配下の各.env ファイルを使用する。
- API が用意出来ていない場合は用意している json-sever を使用すれば手戻りの少ない開発ができる。
- セーブ時にオートフォーマットをする前提で環境を構築しているので、IDE のオートセーブはオフにする。
- Visual Studio Code Version: 1.44.2
- node 12.16.3
- Visual Studio Code Version: 1.44.2 をインストール
- Visual Studio Code の拡張機能を追加
ESLint
Prettier - Code formatter
styleLint
Live Server(ビルド後の動作確認で使用)
- パッケージインストール
- node が入っているか確認。下記のようになれば OK。
node -v
v12.16.3
- 各種パッケージをインストール
npm i
- ローカル開発環境の立ち上げ
- json-server と webpack-server を立ち上げる
- ローカル開発環境では
env/.env.developmentのファイルを読むように設定している
npm run dev
- ビルド
- ビルドコマンドを下記の 3 種類。
npm run build:development
npm run build:staging
npm run build:production
- 読み込みむ env ファイルがそれぞれ異なる。それ以外の違いはない。
- また、ビルド時に console を消去する設定を
webpack.prod.jsの optimizer で行なっている。 - ビルド後のソースは
distディレクトリに保存される。また、live-serverで起動すればビルド後のソースの動作確認ができる。
- html ページを追加する。
pagesディレクトリの配下に html ファイルを追加し、webpack.common.jsのentryに追記する。 詳しくはsrc/ディレクトリの説明.md参照
- IDE の設定
- オートセーブはオフにする。
セーブコマンド実行時に合わせて実行されるオートフォーマットが効かない
ESLintのエラーが出ている状態ではビルドに失敗する
文字を入力するたびにブラウザが際レンダリングされてしまう
等がある。
- オートフォーマットのために
.vscodeのsettings.jsonも共有するようにしている。 - Visual Studio Code 以外でも動作するが、セーブ時に eslint, stylelint, prettier を使用してフォーマットをかける用に設定し、他の開発者とフォーマットの差が出ないようにして欲しい。
- 対応ブラウザについて
.browserslistrcで設定する。大抵のブラウザをカバーするように設定している。babel(JavaScript)、とpostcss-loader(css)が.browserslistrcの設定を見てコンバートしている。
- scss, css について
.browserlistrcの設定を見て自動でベンダープレフィクスを付与する設定にしているので、ベンダープレフィクスは書く必要はない。- どちらも利用可能だが、scss を書いたことがない人も scss ファイルを使用することを推奨。 css そのままの記法もできるので、小さく始められる。
- stylelint に scss をする順番をチェックしている。こちらも保存時にオートフォーマットされるが、順番を修正するために 2 度保存する必要がある。
- フォーマットについて
- フォーマットはコマンドでも実行できる。
- eslintとstylelintを実行
npm run format
- eslintのみを実行
npm run eslint
- stylelintのみを実行
npm run stylelint