Zenn
🍰

npmで自作のCSSを公開したお話

2024/05/09に公開
CSS
npm
tech

適当に、とりあえず何かをブラウザに表示したい時があると思います。
そんな時、自分で作ったよく使うCSS集的なものをコピーしてきて使っているのだけれど、ちょっとめんどくさい。
npmでインストールできるようにしておけば、少しは楽になるかなということでやってみた。そんなお話。

npmでCSSを公開している例

npmでCSSを公開している例として、有名なのはBootstrapかと思います。
BootstrapのGithubを見ると、package.jsonがあって、そこでnpmへアップロードしているファイル一覧を選定している見える。
ということで、同じように作ってみる。

package.jsonを作成する

環境構築とかかったるいので今回利用する環境はGoogle Cloud Shellです。
npmがプリインストールされているので、package.jsonを作るコマンドを叩いていきます。

npm init

すると以下のように質問されるのでそれぞれ答えていきます。

  1. パッケージ名
    • 任意のパッケージ名（アルファベットは小文字のみ）を入力
  2. バージョン
    • なにも入力していない場合は勝手に1.0.0が入ってくれる
  3. 詳細説明
    • パッケージの説明を入力
  4. エントリーポイント
    • はじめに実行されるファイル。何も入力しなかったらindex.jsが入る。今回はCSSのみのアップロードなのでこの欄は消します。
  5. テストコマンド
    • 何も入力しないと、"テストがないよ"の旨をechoするコマンドが入るようです。
  6. Gitリポジトリ
    • これを入れると、バグ報告用のURLとしてissueページを設定してくれたり、ホームページがリポジトリ直下のReadmeになってくれる。
  7. キーワード
    • ライブラリを説明するいい感じのキーワードを入力する。今回はCSSのみで。
  8. 作成者名
    • 自分の名前。
  9. ライセンス
    • 今回はMITにしておいた。
  10. この内容でpackage.jsonを作成して良いですか？
    • yesにして作成する

このようにして雛形ができたpackage.jsonを修正していきます。

package.jsonの雛形を修正する

今回はCSSを公開してみるので、script関係のものは必要ないので、それらの部分を消していきます。

"main": "index.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

そしてかわりに、CSSをnode_modules内にインストールしてもらいために、追加するファイル一覧である、filesを追加していきます。

"files": [
    "*.css",
    "*.svg",
    "**/*.css",
    "**/*.svg",
  ],

この際、インストールしてもらうファイルはpackage.jsonの位置から辿れるような階層に設置します。今回はこんな感じ。

...
└ <プロジェクトフォルダ>
  ├ npmインストールしたときにnode_modulesに保存してもらうfiles
  ├ package.json
  └ README.md

これで、package.jsonを起点に、package.json内のfiles配列とマッチするファイルを配置することができるわけです。
ここでは全ての.cssで終わるファイルと、サブフォルダを含めて(/**/の部分).cssで終わるファイル（svgも同様に）を対象としています。

そんなこんなで実際に作ってみたpackage.jsonはこんな感じ。
かなり小さい構成でできていると思います。

{
  "name": "amasugar",
  "version": "1.0.5",
  "description": "CSSs likes Sweets.",
  "files": [
    "*.css",
    "*.svg",
    "**/*.css",
    "**/*.svg"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rie-amasato/amaSugar.git"
  },
  "keywords": [
    "CSS"
  ],
  "author": "rie_amasato",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/rie-amasato/amaSugar/issues"
  },
  "homepage": "https://github.com/rie-amasato/amaSugar#readme"
}

作ったものをnpmで公開する

さて、作ったものを公開する前に、アップロード用のnpmへのアカウント登録が必要です。
npmのページから、アカウント登録をします。

登録完了したらGCShellのコンソールに戻り、ログインするためのコマンドを実行します。
npm login

わたしの環境ではブラウザが開かなかったので、コンソールに出力されたURLをコピーして、よしなにブラウザに貼り付け、ログインします。ログイン後は404ページに飛ぶけれども、気にせずコンソールに戻ります。

コンソールが操作できるようになるので、package.jsonのある位置に移動したのち、npmへのアップロードを行います。

npm publish

これで、npmに自作のCSS集を公開することができました。
次のセクションでは、Nuxt3で使えるように取得していきます。

自作パッケージをNuxt3で使用する

まずはnpmないしyarnでパッケージをインストールしていきます。

npm install <パッケージ名>

yarn add <パッケージ名>

npmで自分のものが入れられる感覚、ちょっとテンション上がっちゃうね。

そのあとは、インストールしたNuxt3プロジェクト内のnuxt.config.ts内で、インストールしたCSSを読み込む設定を追記。

{
    ...
    css: ["amasugar/amasugar.css"],
}

このときに読み込み設定に記述するファイルの位置はpackage.jsonが存在するフォルダからの位置と同じようになるため、その直下に全cssを@importするCSSを置いておきました。
このCSSが読み込まれて、全部の画面に反映されてくれました。

ここまでで自分が作ったCSS集がnpmを経由していろんなプロジェクトで使えるようになり、管理がちょっと楽になりました。

それはそれとして公開する前に、もうちょっと整理とかしておきたかったなとか思ったところでこの記事はおしまい。（整理してないので大々的に出せない...）

Discussion