ITエンジニア/デザイナ向けにオープンソースを毎日紹介

現在、多くのJavaScriptライブラリがnpmで配布されています。Webブラウザ向けであってもnpmで配布されており、それらをgulpやWebpackによって一つのライブラリにしています。これは毎回のセットアップが面倒です。

そこで使ってみたいのがpikapkgです。特定のディレクトリにライブラリをダウンロードし、Webブラウザからすぐに利用できるようにしてくれます。

pikapkgの使い方

pikapkgを使ったコードです。moduleで使うのでimport構文が使えます。Webpackなどと異なり、web_modulesというディレクトリを相対で指定します(ディレクトリ名は変更可能です)。

import {slugy} from './web_modules/slugy.js';
import timeago from './web_modules/epoch-timeago.js';
import hash from './web_modules/@emotion--hash.js';

const timeToRelative = '2013-01-01';
document.getElementById('timeago-text').innerHTML = `timeago("${timeToRelative}") <br />➡️ ${timeago(new Date(timeToRelative))}`;

const textToSlug = 'Hello World, @pika/web!';
document.getElementById('slugy-text').innerHTML = `slugy("${textToSlug}") <br />➡️ ${slugy(textToSlug)}`;

const textToHash = 'Hash Me!';
document.getElementById('hash-text').innerHTML = `hash("${textToHash}") <br />➡️ ${hash(textToSlug)}`;

後は通常のJavaScriptと変わらず書けます。ポイントはBrowserifyやWebpackが不要ということでしょう。この手軽さは大事で、ちょっとしたWebアプリケーションを書く際にはpikapkgで十分というケースは多そうです。

pikapkgはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

pikapkg/web: Run npm dependencies directly in the browser. No Browserify, Webpack or import maps required.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2