bower-rails から yarn への移行

2017年 03月29日
Ryuichi Nonaka

yarn
nodejs

はじめに

プライベートプロジェクトで Atomic Design の世界を彷徨っていて久しぶりの記事になってしまいました。業務で bower-rails を使っているけれど、Node.js 環境を整備する次いでに bower-rails から yarn に移行した際のメモを残しておきます。将来的に browserify や webpack も活用してみたいですが、現時点でそこまでやりきれる状態にないので、パッケージマネージャを yarn に移行して Sprockets は引き続き利用する前提です。

yarn とは

詳しい説明は省きますが、yarn は npm 互換のパッケージマネージャです。 npm と違い、ディレクトリ配置の制御、賢いローカルキャッシュ、lock ファイルでバージョン固定、が yarn の特徴です。詳しくはこちらの記事 Yarnファーストインプレッションにまとめられています。

yarn のインストール

Getting Started - yarn を見ながらインストールを進めます。Node.js の環境が準備できれば特に難しいことはありません。注意点としては、yarn を使うために Node.js 4.0 以上が必要です。

bower-rails を使っていたのであれば package.json がすでにあると思うので $ yarn init は不要です。

パッケージのインストール

使っているパッケージを yarn を使ってインストールします。インストールが完了すると root に yarn.lock というファイルができるはずです。

$ yarn add <package>

パッケージのインストールディレクトリを変更したい場合は --modules-folder <path> オプションを加えます。今回は vendor/assets/components にパッケージを置きたいので yarn add <package> --modules-folder ./vendor/assets/components/ としてインストールしました。毎回指定するのは面倒くさいのですが、残念ながらコンフィグファイル等でデフォルトを指定することは現時点ではできません。

CLI Introduction
CLI commands comparison - Migrating from npm （ npm コマンドとの違いはここがわかりやすい）

assets の path を設定

Rails で使えるようにするために config/initializers/assets.rb で assets.paths を設定します。

Rails.application.config.assets.paths << Rails.root.join("vendor", "assets", "components")

Sprockets のパスを書き換える

パッケージ名のルールの違いによって、一部のパッケージのパスの書き換えが必要です。ものによってはパッケージ名自体が変わっていることもあります。

-//= require jquery.lazyload/jquery.lazyload
+//= require jquery-lazyload/jquery.lazyload

single version install

1つのバージョンのみをインストールしたい場合、$ yarn install に --flat オプションを加えます。このオプションは package.json でも指定できます。バージョンを指定したい場合は package.json に resolutions を指定します。

{
  "resolutions": {
    "jquery": "2.2.4",
    "source-map": "0.4.4"
  }
}

package.json - config

bower-rails の削除

あとは bower-rails の削除から gem 本体とプロジェクト内のファイルを削除します。

Bowerfile
bower.json
config/initializers/bower_rails.rb
vendor/assets/bowerrc
vendor/assets/bower.json

install コマンドを用意する

$ yarn install の実行時にインストールディレクトリを明示的に指定しないと意図した場所にインストールできないのですが、 run コマンドを使って簡略化できます。 package.json に以下の scripts を追加することで $ yarn run frontend_install でインストールできるようになります。

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "frontend_install": "yarn install --modules-folder ./vendor/assets/components/"
  }
}

他に良い方法をご存じの方がいたらアドバイスいただけると幸いです。これで bower-rails から yarn に移行することができました。

参考記事

Using Yarn with Rails