Vue Componentをnpmパッケージ経由で配布する

Vue Componentを共有する方法はVueファイルを直接渡したりするなど、いくつか方法があると思いますが、ちょうどnpmでライブラリを配布する方法を勉強したばかりなので、勉強がてらnpmパッケージとしてVue Componentを公開する方法を調べてみました。プロジェクトを跨いだり使いまわしたりするときにnpm経由で管理すると便利かと思います。

## Install vue-sfc-rollup
[公式ドキュメント](https://jp.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html)にVue Componentをnpmパッケージにする方法が説明されています。基本的に、このドキュメントの手順に沿っていけば公開までできるかと思いますが、すでに公開までの環境を整えている[リポジトリ](https://github.com/team-innovation/vue-sfc-rollup)が存在します。

以下、公式ドキュメントの最後に謝辞として記載されている内容の抜粋です。
>このページは 2018 年 3 月の VueConf.us で発表された Mike Dodge によるライトニング・トークの成果です。彼はこの手順を用いてサンプルの単一ファイルコンポーネントを基本に構築したユーティリティを npm に公開しました。このユーティリティは、 npm を通じて、 vue-sfc-rollup からダウンロードできます。さらに そのリポジトリをクローンして カスタマイズする事もできます。

私もこのリポジトリをカスタマイズしたら、簡単に公開できました。実はこのリポジトリを使う前は自前でセットアップしていましたが、JavaScriptのライブラリを作った時のようにうまくVue Componentとして公開できず、自前の設定は断念しました。

#### Setup
手順としてはリポジトリのREADMEに記載されている通りですが、ターミナルから以下のコマンドでプロジェクトディレクトリを作成することができます。

```bash
# Create project directory
npx vue-sfc-rollup
```

![1_vQBVZKKZEl7sVi8pU3SqSw.png](https://qiita-image-store.s3.amazonaws.com/0/117549/a17e6bf9-76d8-0a08-ce78-2777b8d62996.png)

Single Componentを選択すると、`/src`ディレクトリに、公開用のコンポーネントが作成されます。`the npm name of your component`を公開するパッケージの名前にすると良いです。この名前が生成されるVueファイルのファイル名になります。

[Vue CLI 3](https://github.com/vuejs/vue-cli/)がインストールされていれば、ホット・モジュール・リロードで`serve`することができます。

```bash:プロジェクトディレクトリのroot
vue serve ./src/your-component.vue
```

#### Build 
ビルドすると、デフォルトの設定であれば`/dist`フォルダに公開用のファイルが生成されます。嬉しいことに、これらのファイルは**`CommonJS/UMD`** と **`ES6 javascript`**に対応しています。

```bash:プロジェクトディレクトリのroot
npm run build
```

#### npm アカウント
npmで公開するためのファイルは揃ったので、あとはpublishするだけです。その前にnpmのアカウントを作成していなければ、[ここ](https://www.npmjs.com/)で作成しておきます。そして、ターミナルからも登録を行います。

```bash:npmのアカウントを登録しておく
npm adduser
```

#### package.json
package.jsonで公開用の設定を行います。`files`プロパティはnpmでライブラリを公開した時、node_modulesのライブラリ名フォルダ内に置かれるディレクトリーとファイルを設定する項目です。もしVueファイルも同時に公開したいのであれば、ここにファイル名を記載すると良いでしょう。デフォルトの設定では公開されるようになっています。その他、各プロパティの内容はnpmの[公式ドキュメント](https://docs.npmjs.com/files/package.json#name)で確認できます。

```bash:npmパッケージを公開する
npm publish
```

これで公開できます。
手順としてはここまでなので、私個人としてはお手軽に公開できたという感覚です。

## vue-hashtag-textarea
手前味噌ですが、私が公開したVue Componentを紹介します。このComponentの機能については[こちら](https://qiita.com/mitsuyacider/items/ae205a044b7039e79cae)の記事で紹介しましたが、Facebookの投稿などでテキスト編集中にハッシュタグをハイライトさせる機能を持たせたTextarea Componentです。Draft.jsのhashtag pluginに似た機能をVueでも扱えるようにしました。編集中のハッシュタグハイライトと、編集中のハッシュタグを別のハッシュタグに置換することができます。また、プレビューモード時にはハッシュタグの選択ができます。まだ生まれたてなのでいろいろ不具合があるかもしれません。。。

![1_7s7YUmUeqynFCflAinF8bw.gif](https://qiita-image-store.s3.amazonaws.com/0/117549/d0e4fe65-4c25-dcd8-efe9-5bf5383fe065.gif)

```vue:使用例
<template>
  <div class="container">
    <vue-hashtag-textarea :option=option />
  <div>  
</template>
 
<script>
  import VueHashtagTextarea from 'vue-hashtag-textarea'
  export default {
    components: {
      VueHashtagTextarea,
    },
    data() {
      return {
        option: {
          textColor: 'black',
          font: '14px "HiraKakuProN-W4-AlphaNum"',
          hashtagBackgroundColor: 'transparent',
          hashtagColor: '#ff0000',
          placeholder: 'Sentence for placeholder #place #holder',
          defaultContent: '',
          isEditMode: true          
        }
      }
    }
  }
</script>
```

テキストカラーとハッシュタグカラー、ハッシュタグの背景を変更することができます。イメージとしてはこんな感じです。

<img width="994" alt="スクリーンショット 2019-03-31 19.43.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/117549/8540180f-8b17-3118-4b49-4d6fe4684e45.png">



npmパッケージは[こちら](https://www.npmjs.com/package/vue-hashtag-textarea)です。
[GitHub](https://github.com/mitsuyacider/vue-hashtag-textarea)にも置いてあります。