Rails6 のちょい足しな新機能を試す40（Webpacker Bootstrap編）

# はじめに

Rails 6 に追加されそうな新機能を試す第40段。 今回は、 `Webpacker Bootstrap` 編です。
Rails 6 では、 `Webpacker` がデフォルトで導入されるようになります。

Ruby 2.6.3, Rails 6.0.0.rc1 で確認しました。Rails 6.0.0.rc1 は `gem install rails --prerelease` でインストールできます。

```shell
$ rails --version
Rails 6.0.0.rc1
```

今回は、みんな大好き `Bootstrap` を [Bootstrap Ruby Gem](https://github.com/twbs/bootstrap-rubygem) を使わずに導入してみたいと思います。
説明しているサイトによって、微妙にやり方が少しずつ違ったりします。この記事は参考程度にしてください。

# Rails プロジェクトを作る

```shell
$ bin/rails new rails6_0_0rc1
$ cd rails6_0_0rc1
```

# User の CRUD を作る

User の CRUD を作っておきます。

```
$ bin/rails g scaffold User name
```

# db:migrate を実行する

```shell
$ bin/rails db:create db:migrate
```

# yarn add で Bootstrap を追加する

Bootstrap jQuery Popper.js を yarn で追加します。

```shell
$ yarn add bootstrap jquery popper.js
```

# config/webpack/environment.js を編集する

`config/webpack/environment.js` を編集して、 jQuery と Popper.js を組み込みます。

```javascript:config/webpack/environment.js
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment
```

# application.js を編集する

`app/javascript/packs/application.js` を編集して bootstrap を import します。

```javascript:app/javascript/packs/application.js
...
import "bootstrap"
import "../stylesheets/application"
```

`app/javascript/stylesheets/application.scss` はこのあと、作成します。

# application.scss を作る

`app/javascript/stylesheets/application.scss` を作成します。
bootstrap を import します。

```scss:app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
```

javascript のディレクトリに scss ファイルを置くのは、ちょっと微妙な気がしないでもないですが、scss(css) は、まだ、 `app/assets` ディレクトリにデフォルトで作られるので仕方ないのかと思ったり思わなかったり。
なんか、 app/javascript ディレクトリを app/webpack ディレクトリに名前を変更している記事も見かけました。

# application.html.erb を編集する

application.html.erb に `stylesheet_pack_tag` を追加します。

```erb:app/views/layouts/application.html.erb
...
  <head>
   ...
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  ...
```

# Bootstrap を使ってみる

Bootstrap を使ってみます。 (Bootstrap が組み込めることを確認するだけですので、詳細は省略します。試したソースでは、 index のページ と入力フォームに最低限の Bootstrap を適用しています。)

リンクをボタンに変更するため、 `scaffolds.scss` の `a` タグの設定を削除しました。

```scss:app/assets/stylesheets/scaffolds.scss
/*以下の設定をまるっと削除する */
a {
  color: #000;

  &:visited {
    color: #666;
  }

  &:hover {
    color: #fff;
    background-color: #000;
  }
}
```

# 実行する

実行して確認すると以下の WARNING が出ますが、Bootstrap が適用されていることが確認できました。

```shell
...
[Webpacker] Compiling…
[Webpacker] Compilation failed:

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3
...
```

# core-js を追加する

core-js が原因で、エラーが発生するという情報も見かけたのですが、手元ではエラーが再現できませんでした。
(エラーは fix されている?)

```shell
$ yarn add core-js@3
```

# 試したソース

試したソースは以下にあります。
https://github.com/suketa/rails6_0_0rc1/tree/try040_webpacker_bootstrap

# 補足

ツールチップなど使う場合には、以下を追記しておく必要があるようです。

```javascript:app/javascript/packs/application.js
document.addEventListener("turbolinks:load") {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
}
```



# 参考情報

* [What is new in Rails 6.0](https://bogdanvlviv.com/posts/ruby/rails/what-is-new-in-rails-6_0.html)
* [Make Webpacker the default JavaScript compiler for Rails 6](https://github.com/rails/rails/pull/33079)
* [How to use Bootstrap with Webpack & Rails](https://gorails.com/episodes/how-to-use-bootstrap-with-webpack-and-rails)
* [Install Bootstrap with Webpack with Rails 6 Beta](https://gorails.com/forum/install-bootstrap-with-webpack-with-rails-6-beta)
* [fix: Stop babel from rewriting babel helpers in core-js.](https://github.com/rails/webpacker/pull/2116)