はじめに
手っ取り早く自作ライブラリを雑にOpenProcessingとかp5.Editorで使ってみたい人のためのお手軽な公開手順。node.jsのインストールは終わっているとする。今のバージョンは22.16.0.
手順
作りたいフォルダに移動してプロジェクトフォルダを作る。
mkdir myProject5
cd myproject5
んで、npm initする。
npm init
色々聞かれるのでプロジェクト名など適当に設定する。
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (myproject5) my_second_project_fish ここでプロジェクト名を決める
version: (1.0.0)
description: hajimemasite
entry point: (index.js)
test command:
git repository:
keywords:
author: fisce 作者名を決める
license: (ISC) ISC よくわかんないのでISCでいい
About to write to C:\myNPM\myProject5\package.json:
{
"name": "my_second_project_fish",
"version": "1.0.0",
"description": "hajimemasite",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "fisce",
"license": "ISC"
}
同じディレクトリにsrcフォルダを作り、その中にindex.jsを作る。雑にこんな感じで。内容はざっくり言うと「mylibrary」というオブジェクトに「hello」という関数が入っててその内容はメッセージの出力と送出。
(function(global, factory){
if (typeof exports === "object" && typeof module !== "undefined") {
factory(exports);
} else if(typeof define === "function" && define.amd) {
define(["exports"], factory);
} else {
global = global || self;
factory((global.mylibrary = {}));
}
})(this, function (exports) {
"use strict";
function hello(){
const message = "はじめまして！はじめてのライブラリ";
console.log(message);
return message;
}
exports.hello = hello;
Object.defineProperty(exports, "__esModule", { value: true });
});
npmにログインする。あらかじめアカウントを作っておき、パスワードなどを決めておく。
ログインする。自分は二段階認証でやってる。
npm login
npm notice Log in on https://registry.npmjs.org/
Login at:
https://www.npmjs.com/login?next=/login/cli/7e7ea1be-c552-45e9-827c-8a0b7296e0f4
Press ENTER to open in the browser...
アイコンはGravatarというのでいじれるらしいけど使ってない。
次に、npm publishでpublishしてみよう。
npm publish
追加された。
これで使えるようになる。jsdelivrを覗いてみる。
しかし見つからない。実はすぐには反映されないようになっている。最初に作った時はその日のうちに作ってもらえなかったので次の日まで待ってみた。朝になったら追加されていた。2回目以降は早くなるみたい。ユーザー名で検索すると簡単に検索できる。自分の場合は「fisce」なので「author:fisce」で検索できる。ユーザー名はnpmのアカウント作成時に付けたもの。
数分で反映された。はやい。
これがCDNで、なんと自動的にminifyを作ってくれる。うれしいね。早速使ってみよう。OpenProcessing.
ここにjsdelivrのアドレスをぶち込む。
const {hello} = mylibrary;
function setup() {
createCanvas(600, 400);
const msg = hello();
textAlign(CENTER,CENTER);
textSize(24);
noStroke();
fill(255);
background(0);
strokeWeight(2);
text(msg, 300, 200);
}
どきどき
使えました。やったぁ。
アップデートする際の注意。バージョンを更新しないといけない。major,minor,patchがある。一番下の数字を更新する場合はpatchを使う。なんらかの更新をしないとpublishできないので注意する。以前にpublishしたバージョンはそのまま残るので切り替えも容易。ここではReadmeを作ってみる。
# はじめに
これは自作ライブラリを作るテストです。
npm publishするとエラーになる。そこでpatchのバージョン更新をする。
npm version patch -m "readme.mdを追加しました。"
これでpublishできる。
（略）
npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
+ my_second_project_fish@1.0.1
サイトに行ってみるとバージョンが増えている。
トップに置いたreadme.mdの内容が反映される。
jsdelivrも1.0.1が使用可能になっている。
https://cdn.jsdelivr.net/npm/my_second_project_fish@1.0.1/src/index.min.js
/**
* Minified by jsDelivr using Terser v5.39.0.
* Original file: /npm/my_second_project_fish@1.0.1/src/index.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o((e=e||self).mylibrary={})}(this,(function(e){"use strict";e.hello=function(){const e="はじめまして！はじめてのライブラリ";return console.log(e),e},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=/sm/f7ced3208938d885b125953ea3108c0c883291a1b698971aba55dfe524e67963.map
数分後には更新されていた。
ざっくりこんな感じ。
おわりに
拝読感謝。
npm logout
参考サイト
p5.jsのアドオンライブラリを作ろう
きゃべさんの次の記事も参考になります。
自作するより既にあるものを使った方が楽なのは言うまでもありません。