Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

あのwebpackとbabelを二度三度。新規プロジェクトの始め方

Node.js JavaScript npm webpack babel

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

以前にもwebpackを導入したことはあったのだけれど、というかその時には先輩に導入してもらったような感じで、すっかり記憶から抜けてしまった。

JavaScript案件の開発をするので改めて入れ直そうとしたら、webpack4になっていろいろ変わったらしい。

目次

環境

  • webpack4

webpack4導入の手順

以前のwebpackとだいぶ異なっているようなので、古い情報を参考にしないように気をつける必要がある。

今更の webpack 4 導入とbabel使うところまでのメモ。 - かもメモ

  • プロジェクトディレクトリに移動
  • npm initしてpackage.jsonを作成。 npm init -yにすると、全部の質問にyesで答えるという手抜き仕様。
  • npm install --save-dev webpack

  • webpack.config.jsを作成

  • babelをインストール。 npm install --save-dev babel-loader @babel/core @babel/cli @babel/preset-env。babel-loader以外はみんな名前が変わってしまった……。

  • webpack.config.jsの項目にbabel関連の記述を追加。

またわからなくなったのでもう一度

この記事の下書きを書いて放置していたのだが、また新規プロジェクトの始め方がわからなくなった。手順を最初からまとめてみる。

いくつか記事を見て復習。

混乱した点を整理。

npm install -Dとは何か

-Dって何のオプション？

次のコマンドでは、カレントディレクトリに指定のパッケージをインストールするときに package.json の devDependencies欄 にパッケージ名が記録される。

――

npm install -D パッケージ名とnpm install --save-dev パッケージ名は等価、ということらしい。なあんだ、それならわかるよ。

npx webpack ってなんだっけ？

npmのバージョン5.2.0で導入された「npx」を用いると、下記のようにローカルにインストールしたnpmパッケージを、npxコマンドだけで実行できるようになります。

――

npm5.2.0で導入され、ローカルパッケージを実行するコマンド。

npx (モジュール名)で実行する。

手順を整理しましょう。

package.jsonがまだ存在しない場合

npm initする。オプションに全部yesなら--yをつける。あとでjsonいじればいいや。

npm init -y

これでpackage.jsonが生成された。

ツールの選定

次に、webpackやweb pack-cliのモジュールをインストール。

npm install webpack webpack-cli @webpack-cli/init --save-dev

他にも必要なモジュールがあればインストール。例えば以下。

  • webpack
  • webpack-cli
  • eslint
  • babel
  • bootstrap
  • Vue.js
  • prettier

必要なパッケージを一つずつnpm install -Dしていく。

--save-dev: デバッグ系（テストツール）はdevDependenciesに入れる
--save: アプリケーションの中で必要なpackage（例えば日付解析:moment）はdependenciesに入れる

――

必要なパッケージ情報が明確に分かっているのなら、package.jsonに書き込んでnpm installで一括インストール（復元）するという手段もとれる。

  "devDependencies": {
    "@babel/cli": "^7.7.5",
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@webpack-cli/init": "^0.2.2",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "eslint": "^6.8.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },

package.jsonが存在する場合

npm installでpackage.jsonの内容を復元する。

webpackの起動

「PATHを通す方法」と「npxを使う」がある模様。

現状のままだと、ローカルインストールが成功してもwebpackコマンドを実行できないため、以下のようにPATHを通す必要がある。 ――
PATH指定してwebpackを実行してもよいが、これを簡単に起動するためにnpxというコマンドを使用する。 ――

必要なパッケージのinstallが終わったら

package.jsonを編集。特に、npm scriptsを設定。buildでwebpackが実行されるようにしておくなど。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode none"
  },

これでnpm run buildでwebpackがよろしいようにやってくれる。

npx webpack init

webpack.config.jsを自分で用意できるならいいが、対話型でひな型を作ってほしい場合は @webpack-cli/initをインストールする

npm install --save-dev @webpack-cli/init

注意: webpack-cli/init 0.3には問題があるようなので、解決するまでは0.2.2を使う方が良さそう。

Try to use @webpack-cli/init@0.2.2.
There are some problems with 0.3
https://github.com/webpack/webpack-cli/issues/1127
Also in webpack-cli@beta (v4), they renamed init to create.
how to use "npx webpack-cli init" - Stack Overflow

npm install --save-dev @webpack-cli/init@0.2.2

その後、実行する。

$npx webpack init

対話型で質問に答えていくとwebpack.config.jsを作ってくれる。

webpack.config.jsを編集して、babelとかが動くようにする。

source mapを作成する

デバッグがやりづらいと思っていたが、source mapで解決できるらしい。

bundle.jsはソースコードが連結され、require部分が書き換えられたりすることで自分が編集したオリジナルのソースコードとは変わっていて、Chromeのデベロッパーツールでソースをデバッグするのがやりづらくなる。これを解決するのがsource map。 ――

eslintの設定

eslint --init

eslintについては、後でもうちょっと整理する。

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "windows"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

editorconfigも忘れず

webpackとは直接関係ないが、プロジェクト開始時点で、.editorconfigファイルを入れておく。

prettier

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true
}

参考記事