Vue.jsプラグインで始めるOSS

はじめに

これはVue Advent Calendar 2019の16日目の記事です。

最近、Vue.jsのプラグインを作ってNPMパッケージとして公開する機会がありました。Vueのプラグインを作るのもNPMパッケージを公開するのも初めてでしたが、意外と手軽にできたので、「OSSはなんか敷居が高そうだ...」と思っているエンジニアにもオススメです。

今回、TypeScriptでVueプラグインを実装し、NPMに公開するためのテンプレートを用意してGithubに公開しました。この記事では、そのテンプレートの紹介をします。

テンプレートのご紹介

vue-plugin-ts-templateというテンプレートを用意しました。
中身は本当にシンプルで、一般的なtypescriptのプロジェクトでちょっとだけ実装したコードが入っているだけのものになります。

案外、TypeScriptやeslint、prettierの導入が面倒だったりするので、Vueのプラグインの作り方というよりかは開発環境を一発で作れるという意味の恩恵のほうが強いかもしれません。

プラグインの実装〜NPMパッケージの公開まで

流れはREADMEに書いてありますが、英語になっているので改めて日本語で解説していきたいと思います。

0. 要件

NPMパッケージとして公開するにあたり、NPMのアカウントが必要になるので、公開しようと思う人は作っておくようにしましょう。
また、typescriptはtscでコンパイルしているのでグローバルにインストールしておくと良いでしょう。

1. packageの初期化と依存関係のインストール

まずはテンプレートをダウンロードして依存関係をインストールしましょう。
NPMに公開する際には、パッケージのいろんな情報を入力する必要があります。
下記のコマンドを実行すると、コマンドライン上でインタラクティブに質問が出てくるので自分のパッケージにあったものに修正していきましょう。

$ yarn install
$ yarn init

こんな具合に入力していきます。

• テンプレートには初めから設定値が入っているので、使う場合は上書きしてください。 keywordsは聞かれないようなので、直接package.jsonを編集する必要があります。
• endopointはデフォルト（index.js）で大丈夫です。tsconfig.jsonでビルドファイルをプロジェクト直下のindex.jsとして出力するようにしています（好みに応じて変えてください）。

2. プラグインの実装

Vueプラグインの実装方法については公式サイトが参考になります。
srcフォルダ内でTypeScriptを書いてください。
テンプレート内ではLoggerをインスタンスメソッドとして追加しています。

import _Vue from 'vue';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const log = (value: any): void => {
  console.log(value);
};

export default {
  install(Vue: typeof _Vue): void {
    Vue.prototype.$log = log;
  }
};

ちなみに、公開したパッケージはこんな感じで使えます。

import Vue from 'vue';
import VueLogger from 'vue-logger'; // 公開するパッケージ名

Vue.use(VueLogger);

<script>
export default {
  mounted() {
    this.$log('component is mounted!');
  }
};
</script>

3. ビルド

npmスクリプトとしてビルドコマンドも用意しています。

$ yarn build

これだけです。

4. コミット&プッシュ&タグ作成

ビルドまで終わったらNPMに公開できる状態になります。
NPMに公開してるバージョンとGithubのコードのパージョンは揃っていたほうが都合がいいと思うので、公開する前にコードをコミット・プッシュして、バージョンがわかるタグを打っておくようにしましょう。
package.json内にあるバージョン情報も必要に応じて更新しましょう。

5. NPMへの公開

ここまでくればあとは公開するのみです。
プロジェクト直下（package.jsonがいるディレクトリ） で下記のコマンドを実行すればOKです。

$ npm adduser 
$ npm publish ./

npm adduserでは、登録済みのNPMアカウントでログインを行います。
ここでログインしたアカウントにパッケージが追加されることになるので、会社用・仕事用で使い分けている場合などは注意しましょう。

まとめ

Vueでなにかする場合に、プラグインとして使える機能があると結構便利です。
また、プラグインの作成もそんなに難しいものではないですし、OSS活動を始めるにはもってこいの題材かもしれません。
便利なプラグインを作ってVueを盛り上げていきましょう！！