yarnでreact+redux+webpack+babelな環境を構築してみる #JavaScript

はじめに

jsから遠ざかっていたんですが、仕事上必要になってきそうだったので、
jsのモダンな開発環境を勉強・構築しようと思い以下を試してみたメモになります。

yarnインストール
yarn経由でreact, redux周りを追加
yarn経由でwebpackとbabel周りを追加

間違いなどあればご指摘頂けますと助かりますm(__)m

yarnとは

jsのパッケージを管理するパッケージマネージャーです。
FacebookやGoogleが開発しています。

同じパッケージマネージャーとしてnpmがありますが、
yarnは公式で「高速」「より厳密にバージョン管理を行う」「セキュリティが高い」と言っています。
それぞれ簡単に説明すると以下になります。

○高速

並列で実行されます。
キャッシュを利用しインストールしたパッケージを管理します。

○厳密なバージョン管理

より厳密にバージョン管理を行うために、yarn.lockというファイルを生成しそこでバージョン管理を行っています。もしあるシステムでインストールが正常に動作しているとすれば、他のシステムでも同じように動作することを保証すると言っています。

npmにもshrinkwrapという同様の機能がありますがyarnとの大きな違いはデフォルトではないというところです。

○セキュリティ

npmではインストール時にパッケージがコードを実行することを許可しているためセキュリティ上問題がありましたが、yarnではコード実行前にchecksumsを使用してインストールされているすべてのパッケージの整合性を検証していると言っています。

※詳細は公式を見てくださいm(__)m
https://www.npmjs.com/package/yarn

環境

Mac OSX El Capitan 10.11.6
Homebrew 1.3.0

yarn install

$ brew install yarn
$ yarn --version
0.27.5

これでインストールはおしまい

初期化

適当なところにワーキングディレクトリを作成します
↑で作成したディレクトリ内でyarn initします

$ mkdir yarn-sample
$ cd yarn-sample
# プロジェクト名やバージョン番号を聞かれます
$ yarn init
yarn init v0.27.5
question name (yarn-sample): yarn-sample
question version (1.0.0): 0.0.1
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):

今回は名前とバージョンだけ指定してみました(適当)
実行後ディレクトリを確認してみるとpackage.jsonというファイルができています。
このファイルでプロジェクトのメタ情報やパッケージの依存関係が管理されます。

$ ls
package.json

# package.jsonの中身を見てみる
$ vim package.json

実際の中身

package.json

{
  "name": "yarn-sample",
  "version": "0.0.1",
  "main": "index.js",
  "license": "mit"
}

reactとreduxを追加

$ yarn add react react-dom redux react-redux
yarn add v0.27.5
warning package.json: License should be a valid SPDX license expression
info No lockfile found.
warning yarn-sample@0.0.1: License should be a valid SPDX license expression
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 26 new dependencies.
├─ asap@2.0.6
├─ core-js@1.2.7
├─ create-react-class@15.6.0
├─ encoding@0.1.12
├─ fbjs@0.8.14
├─ hoist-non-react-statics@2.3.1
├─ iconv-lite@0.4.18
├─ invariant@2.2.2
├─ is-stream@1.1.0
├─ isomorphic-fetch@2.2.1
├─ js-tokens@3.0.2
├─ lodash-es@4.17.4
├─ lodash@4.17.4
├─ loose-envify@1.3.1
├─ node-fetch@1.7.2
├─ object-assign@4.1.1
├─ promise@7.3.1
├─ prop-types@15.5.10
├─ react-dom@15.6.1
├─ react-redux@5.0.6
├─ react@15.6.1
├─ redux@3.7.2
├─ setimmediate@1.0.5
├─ symbol-observable@1.0.4
├─ ua-parser-js@0.7.14
└─ whatwg-fetch@2.0.3
warning yarn-sample@0.0.1: License should be a valid SPDX license expression
Done in 5.63s.

warningが出ましたがインストールされました。
ディレクトリ確認してみると新しいディレクトリとlockファイルができています

$ ls
node_modules    package.json    yarn.lock

package.jsonの中身を見てみるとインストールしたパッケージ分増えています

package.json

{
  "name": "yarn-sample",
  "version": "0.0.1",
  "main": "index.js",
  "license": "mit",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  }
}

ちなみに↑で出ていたwarning yarn-sample@0.0.1: License should be a valid SPDX license expressionというエラーですが、
package.jsonの中のlicenseをMITに変更してもう一度インストールコマンドを実行してみたら出ませんでした。

webpackとbabel周りを追加

webpackとbabel周りですが、このyarn-sampleというプロジェクト開発時には必要ですが、
誰かがこのプロジェクトをライブラリとして利用する場合には必要のないものとなります。
なので、↑でreactを追加した時とは一部オプションを変えます。

# 大量のパッケージが追加されるので結果は省略
$ yarn add --dev webpack babel-loader babel-core babel-preset-es2015 babel-preset-react

package.jsonは以下のようになりました。

package.json

{
  "name": "yarn-sample",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.5.5"
  }
}

devDependenciesの中に追加されました。
※yarn.lockファイルはこの時点で2500行を超えたので割愛させていただきますm(__)m

以上です。

おわりに

しばらくjsから離れていたわけですが、jsの進化の速さにビビりまくっております。。

今回環境を構築したと言っても最低限で、実際にはwebpack.config.jsにwebpack周りのconfigを書いたり、
.babelrcにbabel周りのconfigを書いたりそもそもreactとreduxの連携方法を把握したり・・・
と覚えることが多すぎて非常にハードルが高くなっており焦ります。

改めてフロントエンジニアとしてご活躍されている方たちの凄さを感じました。

めげずに次回はwebpackのチュートリアルをやってみる予定です。
(いつになったらまとまったプロジェクトになるのだろうかw)