More than 1 year has passed since last update.

CDNのjQueryをImport Mapsで読み込ませる方法

Posted at 2022-11-15

jQueryはもう使わないけど、一例として、、

index.html

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample Import Maps</title>
  <script type="importmap">
    {
      "imports": {
        "jQuery": "https://code.jquery.com/jquery-3.3.1.js"
      }
    }
  </script>
  <script type="module" src="./js/sample.js"></script>
</head>
<body>
  
  <div id="count">0</div>
  <input type="button" id="up" value="+">
  <input type="button" id="minus" value="-">

</body>

sample.js

"use strict";

import 'jQuery';

$(window).on('load', function(){
    console.log('loaded!');

    let count = 0

    $('#up').on('click', function () {
        $('#count').html(++count)
    })
    $('#minus').on('click', function () {
        $('#count').html(--count)
    })
})

jQuery以外のCDNでも使えそう
CDNでなくてもローカルのJSファイルもできる
検索しても情報が少ない
ES Modulesで書いてるのでindex.htmlはWebサーバー環境で見てください

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up