Railsのバージョンとwebpackerについての技術検証

Rails APIとVue3を使ってSPAとしたい Ruby、Rails、Vue.jsのバージョンについての考察

webpackはJSのnpmパッケージ、webpackerはRubyのgem rails new myapp --javascript [importmap|esbuild|rollup|webpack]で Rails7ではデフォルトではimportmap、JS変更ごとWebpackでファイルを1つにまとめてた必要がなくなる

importmapについて importmap-railsを使う ES6のimport文で直接モジュールのURLを読み取る。 Node.jsが非依存、JSXが使えない。 JSXというのはReactでよく使われる、JS内にHTMLの要素をそのままかいてしまうこと、以下のような
```
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
```
./bin/importmap pin vueとするとvue関連のnpmをマッピングしてくれる
```
// config/iportmap.rb
pin "vue", to: "https://ga.jspm.io/npm:vue@3.2.33/dist/vue.runtime.esm-bundler.js"
pin "@vue/reactivity", to: "https://ga.jspm.io/npm:@vue/reactivity@3.2.33/dist/reactivity.esm-bundler.js"
pin "@vue/runtime-core", to: "https://ga.jspm.io/npm:@vue/runtime-core@3.2.33/dist/runtime-core.esm-bundler.js"
pin "@vue/runtime-dom", to: "https://ga.jspm.io/npm:@vue/runtime-dom@3.2.33/dist/runtime-dom.esm-bundler.js"
pin "@vue/shared", to: "https://ga.jspm.io/npm:@vue/shared@3.2.33/dist/shared.esm-bundler.js"
```
出力は<%= javascript_importmap_tags %>とapp/views/layouts/application.html.erbのheadににあり、これが呼び出す起点となっている参考ページ・DHHのhttps://youtu.be/k73LKxim6tw ・Rails 7.0 で標準になった importmap-rails とは何なのか？
jsbuildingについて jsbundling-rails importmapを使用しない場合の選択肢。 webpack/esbuild/rollupのいずれかでapp/javascript/application.jsのJSファイルをバンドル、 Railsのapp/assets/builds/application.jsアセットパイプラインを使用して出力 bin/devコマンドを使ってRailsサーバー起動、JSとCSSの変更を監視 nodeが使える →cssでbootstrapやbulmaが使いたければ、nodeが必要なのでimportmapではなくjsbundlingを使用(自動的にインストールされる) →yarn add vueをすると
```
{
"name": "app",
"private": "true",
"dependencies": {
"@hotwired/stimulus": "^3.0.1",
"@hotwired/turbo-rails": "^7.1.1",
"@popperjs/core": "^2.11.5",
"esbuild": "^0.14.39",
"sass": "^1.51.0",
"vue": "^3.2.33"
},
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
}
```
とpackage.jsonにbuild設定が追加される
- esbuild Node.jsのビルドツール、Goで書かれていて(普通のビルドツールはJSで書かれている)とにかく高速でビルドができる

参考ページ・DHHのhttps://youtu.be/JsNtLiph87Y

ちなみにrails-base-appという、アプリもあるがViteを利用 Rails7で単一コンポーネント.vueを使うのであればVite等の別ライブラリが必要そうである。

したがってRails6＋webpackerで開発を進めていくとする。

garammasala29 / NursePicks

Railsのバージョンとwebpackerについての技術検証 #20