​​Yarnとwebpackでnpmエコシステムを活用しよう！
​​
​​
 
User-uploaded image: cover_yarn-webpack-npm-80.jpg
​​

​​登場人物紹介

​​Yarn

​​https://yarnpkg.com/lang/en/
​​できる子。

​​webpack

​​https://webpack.github.io/
​​モジュールバンドラー。
​​JSだけでなくありとあらゆるファイルを取りまとめる。

​​npm

​​https://www.npmjs.com/
​​JS界隈がついに手に入れたパッケージマネージャ。
​​サーバ・クライアント問わず様々な用途のモジュールが転がっている。
​​

​​Yarnとは

​​JSモジュールのパッケージマネージャ。
​​npm のリポジトリを参照しているので、
​​Yarnでインストールできるもの = npm でインストールできるもの
​​
​​つまり npm と同じじゃん！
​​

​​npm の問題点

  • ​​インストールが遅い
  • ​​インストールするモジュールの一貫性を確保することが難しい
  • ​​インストール時のコード実行が許可されているため危険がデンジャラス
​​※npm v5 の話はいったんおいておこう
​​

​​早い、Yarnさん早いよ…！

  • ​​キャッシュを活用してモジュールをインストールする
  • ​​並行ダウンロードする
​​

​​Yarn先輩、超ロックっすね…！

  • ​​モジュールを追加すると yarn.lock​ ファイルが生成・更新される
  • ​​インストールされるモジュールのバージョンを厳密に固定することができる
  • ​​npm-shrinkwrap​ のことは忘れよう
​​

​​うむ、Yarn君なら安心だ！

  • ​​チェックサムで整合性を確認してからモジュールをインストールする
​​※モジュール自体の安全性を保証するわけではない
​​

​​Yarnのインストール

​​https://yarnpkg.com/en/docs/install
​​

​​webpackはミニマムに始めるべし

  • ​​ES201x/TS → JS
  • ​​モジュールの依存解決
​​