技術とか戦略とか

IT技術者が技術や戦略について書くブログです。

npmで公開されているパッケージをローカルに落とさず使用する

npmで公開されているパッケージは、UNPKG(https://unpkg.com/)で公開されています。
UNPKGで公開されているパッケージをscriptタグ等で指定することで、ローカルにライブラリを落とすことなくライブラリを使用することができるようになります。
インターネット接続していることが前提となりますが、Webシステムでは便利なサービスです。
(このようなサービスをCDNサービスと呼びます)
 
以前に試したVue.js(https://akira2kun.hatenablog.com/entry/2021/01/03/120000)も、インストールすることなく以下のような形で使用することができます。
(今回は触れませんが、バージョン指定も可能です)
 
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Vue.js - Hello world!</title>
</head>
<body>

<div id="app">
 <input type="checkbox" id="checkbox1" v-model="checked1">
 <label for="checkbox1">
  {{ message }}
 </label>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
 var app = new Vue({
  // elで指定した値はdivタグのidと対応
  el: '#app',
  // 変数の初期値定義
  data: {
   message: '',
   checked1: false
  },
  // 変数の値を監視するイベントを定義
  watch: {
   checked1: function(newVal, oldVal) {
    this.message = (newVal) ? 'Hello World!' : '';
   }
  }
 })
</script>
</body>
</html>