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"
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の要素をそのままかいてしまうこと、以下のような
./bin/importmap pin vue
とするとvue関連のnpmをマッピングしてくれる出力は
<%= 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
をするとと
package.json
にbuild設定が追加される参考ページ ・DHHのhttps://youtu.be/JsNtLiph87Y
ちなみにrails-base-appという、アプリもあるがViteを利用 Rails7で単一コンポーネント
.vue
を使うのであればVite等の別ライブラリが必要そうである。したがってRails6+webpackerで開発を進めていくとする。