Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響

shu_numata
October 26, 2024

Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響

shu_numata

October 26, 2024
Tweet

Other Decks in Programming

Transcript

  1. <script type="importmap"> { "imports": { "dayjs": "https://cdn.skypack.dev/[email protected]", } } </script>

    <script type="module"> import dayjs from 'dayjs'; // ↓と同じになる // import dayjs from 'https://cdn.skypack.dev/[email protected]' </script> Import maps
  2. importmap-rails # config/importmap.rb pin "dayjs", to: "https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js" # application.html.erb <%=

    javascript_importmap_tags %> <script type="importmap" data-turbo-track="reload">{ "imports": { "dayjs": "https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js" } }</script> <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js">
  3. // application.js import "@hotwired/turbo-rails" import { Application } from "@hotwired/stimulus"

    import Honeybadger from "@honeybadger-io/js" Honeybadger.configure({ apiKey: ’aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa’ , }) const application = Application.start()
  4. # config/importmap.rb pin "@honeybadger-io/js" , to: "@honeybadger-io--js.js" <script type="importmap" data-turbo-track="reload">{

    "imports": { "@honeybadger-io/js": "/assets/@honeybadger-io--js-98f68298ce509dfd7b221dfbdde2cf6c4fe60e97359d baed12ddaa7ad7c8c403.js", ... } }</script> SprocketsかPropshaftでフィンガープリントがつく