blog

bower-rails から yarn への移行

    • Ryuichi Nonaka

    はじめに

    プライベートプロジェクトで 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/ としてインストールしました。毎回指定するのは面倒くさいのですが、残念ながらコンフィグファイル等でデフォルトを指定することは現時点ではできません。

    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"
      }
    }
    

    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 に移行することができました。

    参考記事

    コメント・フィードバック