Bower は deprecated なので Yarn へ移行した

一度もまともに使ったことなかったけど bower って死んでたんだね…。正確にいうと "maintained, but deprecated" か。

自分には関係ない話かと思っていた…が、普段まったく触らないがひっそりと稼働を続けるレポジトリに2014年来の bower が残っているのを見つけてしまったので葬った。

構成

こんな感じの bower.json に依存性がガーッと書いてあって

# bower.json
{
  "dependencies": {
    "jquery": "~2.1.1",
    "backbone": "~1.1.2", # そう、backbone です…
    "marionette": "~2.0.2",
    "backbone.stickit": "~0.8.0",
    ...
  },
  "overrides": {
    "backbone.stickit": {
      "main": "backbone.stickit.js"
    },
    ...
  },
  "devDependencies": {
    ...
  }
}

dependencies のライブラリ群をまとめて concat して特定のパスに出力していた。

# gulpfile.coffee
gulp       = require 'gulp'
concat     = require 'gulp-concat'
bowerFiles = require "main-bower-files"

gulp.task 'vendor', ->
  gulp
    .src bowerFiles()
    .pipe concat('vendor.js')
    .pipe gulp.dest('./app/assets/javascripts/vendor')

migration

依存性管理を yarn へ

まず依存性管理を yarn に移す。

bower.json の dependencies と devDependencies を package.json に移動する。一個一個 yarn add してもいいのだが、version はなるべくキープしたかったのでそのまま。

bower.json は削除する。

# package.json
{
  "dependencies": {
    "jquery": "~2.1.1",
    "backbone": "~1.1.2",
    "backbone.marionette": "~2.0.2",
    "backbone.stickit": "~0.8.0",
    ...
  },
  },
  "devDependencies": {
    ...
  }
}

単にコピーした状態で yarn install を走らせると失敗した。主に以下の理由による。

パッケージ名が bower と npm で異なる
- npm で調べて置換する
- import や require を使っていたらそのパッケージ名も要編集
指定の version が存在しない
- version 差異を少なくするため、最低の version を選んでおいた

ビルド周りの整理

gulpfile を修正する。

まず main-bower-files のような packege は yarn remove する。

gulp の src として、dependencies に含まれるライブラリのパスをちまちま書いていく。package.json 中の dependencies をうまく引っ張ってくるとか、もっと冴えたやり方がありそうだけど一旦これで。

# gulpfile.coffee
gulp       = require 'gulp'
concat     = require 'gulp-concat'

gulp.task 'vendor', ->
  libs = [
    "node_modules/jquery/dist/jquery.min.js"
    "node_modules/backbone/backbone-min.js "
    "node_modules/backbone.marionette/lib/backbone.marionette.min.js"
    "node_modules/backbone.stickit/backbone.stickit.js"
    ...
  ]

  gulp
    .src libs
    .pipe concat('vendor.js')
    .pipe gulp.dest('./app/assets/javascripts/vendor')

他にも "bower_components/..." 配下を参照しているパスがある箇所は全部 "node_modules/..." を参照するように置換した。

ビルド

この状態で gulp を走らせる。

アプリケーションは dest ('./app/assets/javascripts/vendor') の中身を読んでいるだけなので特に変更は必要なかった。

ここまでで CI に push したらテストも通った 😇 ということで即マージしてもらえた。

余談

終わった後に気付いたが yarn を使いつつ "bower_components./" を使い続けるソフトマイグレーションもできるようだ。

How to migrate away from Bower? · Bower blog

# 
{
  "dependencies": {
    "@bower_components/almond" : "jrburke/almond#~0.2.9",
    "@bower_components/angular" : "angular/bower-angular#^1.0.8",
    "@bower_components/d3" : "mbostock-bower/d3-bower#~3.3.10"
  }
}