Rails + Webpacker の使い方に慣れていなくて
試行錯誤するとすぐにわけがわからなくなるので
毎回以下のように ruby しか入ってない状態から docker を作り直しています
FROM ruby:3.0.1
RUN apt-get update
RUN apt-get install -y build-essential curl git zlib1g-dev libssl-dev libreadline-dev ruby-dev vim tzdata wget nodejs npm
RUN npm install n -g
RUN n stable
RUN apt purge -y nodejs npm
RUN npm install yarn -g --force
RUN gem install rails
# ここから Rails の中の構築
RUN rails new testapp
WORKDIR testapp
RUN bundle install
RUN yarn install --check-files
RUN rails webpacker:install
RUN touch app/javascript/packs/application.scss
RUN echo 'import "./application.scss";' >> app/javascript/packs/application.js
RUN echo 'console.log("application.js");' >> app/javascript/packs/application.js
RUN rails g controller top index
############
RUN yarn add bootstrap
RUN yarn add @popperjs/core
RUN echo 'require("bootstrap");' >> app/javascript/packs/application.js
RUN echo 'console.log(bootstrap.Tab);' >> app/javascript/packs/application.js
ENTRYPOINT ["bin/rails", "s", "-b", "0.0.0.0"]
application.js の中がこんな感じなんですが
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
import "./application.scss";
require('bootstrap');
console.log(bootstrap.Tab);
この状態で /top/index を開くと
application.js:17 Uncaught ReferenceError: bootstrap is not defined
at Module../app/javascript/packs/application.js (application.js:17)
at __webpack_require__ (bootstrap:19)
at Object.0 (module.js:24)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
となります
view に
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
を追加すればエラーが消えて bootstrap というグローバル変数にアクセスできます
CDN ではなく webpacker で bootstrap の JS を使うにはどうすればいいのでしょうか
yarn add bootstrap
して
require('bootstrap')
とかくだけでは使えないのでしょうか
bootstrap css だけはすでに使えたので CSS 関連はスキップしています
Rails6 webpacker で bootstrap 導入してるブログいくつかみたんですが
どこも bootstrap タグをつけてで表示して終わりで
JS から操作する部分まで確認してるものがみあたらないんですよね