はじめに

これは、p5.js、TypeScript、Vite、VSCodeを使ってクリエイティブコーディングした作品を、Neortなどの作品共有サイトで公開するのに適したビルド方法についての説明です。

VSCodeとViteでコード補完機能を利用しながらコーディングするには、p5.jsをyarnまたはnpmでインストールして開発する必要があります。しかし、Viteでビルドすると、npmパッケージが含まれるため、生成されるJavaScriptファイルが大きくなり、Neortでの公開には適していません。

この記事では、トランスパイルされたコードをHTMLに埋め込むことで、ビルドサイズを抑え、Neortなどでの公開に適した方法を紹介します。

開発環境

Visual Studio Code(or Cursor)
p5.js
TypeScript
Vite

npmパッケージをCDNに置換

ビルド時にp5.jsのコードをバンドルせず、CDN経由で読み込むことで、ビルドサイズを抑えます。npmパッケージのインポートをCDN経由の読み込みに置き換えるには、vite-plugin-cdn-importを使用します。

コード内で、次のようにp5.jsをimportしている場合に有効です。

import p5 from "p5";

インストール

$ yarn add -D vite-plugin-cdn-import

設定

vite.config.jsに設定します。

vite.config.js

+ import cdn from "vite-plugin-cdn-import";

...

export default ({ mode }) => {
  return defineConfig({
    plugins: [
+     cdn({
+       modules: [
+         {
+           name: "p5",
+           var: "p5",
+           path: "https://cdn.jsdelivr.net/npm/p5@1.10.0/lib/p5.min.js",
+         },
+       ],
+     }),
      
      ....
      
    ],
  });
};

コードをHTMLに埋め込む

Viteでビルドすると、TypeScriptコードはJavaScriptにトランスパイルされ、別々のファイルとしてバンドルされます。その結果、ビルド後には複数のファイルが生成されます。vite-plugin-singlefileを使用すると、トランスパイルされたJavaScriptコードを直接HTMLに埋め込んで、ビルド結果を単一のファイルにまとめることができます。

インストール

$ yarn add -D vite-plugin-singlefile

設定

vite.config.js

import cdn from "vite-plugin-cdn-import";

...

export default ({ mode }) => {
  return defineConfig({
    plugins: [
+     viteSingleFile(),
      cdn({
        modules: [
          {
            name: "p5",
            var: "p5",
            path: "https://cdn.jsdelivr.net/npm/p5@1.10.0/lib/p5.min.js",
          },
        ],
      }),
      
      ....
      
    ],
  });
};

ビルド結果

index.html

<!doctype html>
<html lang="en">
  <head>
    //CDNの読み込みに置換
    <script src="https://cdn.jsdelivr.net/npm/p5@1.10.0/lib/p5.min.js" crossorigin="anonymous"></script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Original Sketch</title>
    //インラインのコード
    <script type="module" crossorigin>(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;f
...
    new p5(h);</script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>