Vue Cli 3で作ったコンポーネントライブラリをnpmで公開する 

## 自己紹介
<img src="https://qiita-image-store.s3.amazonaws.com/0/2955/e5fce893-08d7-0bdc-9be1-b10b0bbe965c.png" width="100px">
@coppieee
https://coppieee.com
フリーランスプログラマ
Vue.js、TypeScript、Serverless、Cordovaとかやってます。

---
## Vue.js コンポーネントライブラリを作成しました
Vue.jsでMaterial DesignしたくてVuetifyやVue Materialとかライブラリを触ってみたけど、
CSSなどいろいろカスタマイズし辛い。
なのでMaterial Designの勉強も兼ねて、Material Designの自作ライブラリを作りnpmに公開しました。
npm公開作業は結構簡単にできたのでnpm publishの方法を共有します。

---
## npmで公開したもの
### Vuterial
Material Designするための Vue.js コンポーネントライブラリ。
Materail Conponents for Webを使って実装してる。

https://github.com/coppieee/vuterial
https://coppieee.github.io/vuterial/

---
## サンプル(ドキュメントページ)
<img src="https://qiita-image-store.s3.amazonaws.com/0/2955/34ede9fd-f853-a09f-eb86-472154b56b75.png" width="600px"/>

---
## コンポーネントをnpm publish して公開する手順
- Vue CLI 3でプロジェクトを作成
- build設定
- package.json設定
- npmjsにサインアップ
- npm publish

---
## Vue CLI 3でプロジェクトを作成
ライブラリを作成する場合もWebアプリと作るのと同様にVue CLIから作成します。

```shell
$ npm i -g @vue/cli
$ vue create your-library-name
```
特にライブラリ用に特殊な設定は必要ないので自分の好きなように設定しよう。
ライブラリ名は名前が被ってないか[npmjs.com](https://www.npmjs.com)でチェックしておきましょう。

---
# Build設定
ライブラリのビルドは`vue-cli-service`にライブラリ生成用のビルドオプションがあるのでそれを使う。

```shell 
$ vue-cli-service build --target lib --name your-library-name ./lib-main.js
```

それを```package.json```の```scripts```に```build-bundle```など適当な名前で設定しておくといいでしょう。

```json:package.json
{
  "scripts":[
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-bundle": "vue-cli-service build --target lib --name your-library-name ./src/lib-main.js",
    ...
  ]
}
```

---
# Build結果
```shell
$ npm run build-bundle
```
./distフォルダに以下のファイルが出力される

```shell:./dist
your-library-name.common.js
your-library-name.common.js.map
your-library-name.css
your-library-name.umd.js
your-library-name.umd.js.map
your-library-name.umd.min.js
your-library-name.umd.min.js.map
```
jsとcssを生成してくれる。
WebPackなどで使う場合はcommon.js、ブラウザで直接読み込む場合はumd.jsを使うことになる。
ライブラリの生成まで一つのコマンドでしてくれるVue CLI 3ってすげー。

---
# ライブラリの実装例
今回はVue プラグインとして使う設定をしている。
ライブラリ使用者は`Vue.use(libraryName)`の形式で使うことになる。以下一例。

```javascript:lib-main.js
import { mdcChip } from './components/mdc-chip.vue'
import { mdcCard } from './components/mdc-card.vue'
import { mdcButton } from './components/mdc-button.vue'
// ...
export default const YourLibraryName = {
  install(Vue, options){
    const components = {
      mdcButton,　// <mdc-button/> として使える
      mdcCard, // <mdc-card/> として使える
      // ...
    }
    for(const [name,c] of Object.entries(components)){
        Vue.component(name,c)
    }
  },
} 
```

---
## package.jsonの設定
```json:package.json
{
  "name": "your-library-name",
  "version": "0.1.0",
  "main":"dist/your-library-name.common.js", // エントリーポイント
  "unpkg": "./dist/your-library-name.umd.min.js", // CDN用(オプション)
  "jsdelivr": "./dist/your-library-name.umd.min.js", //CDN用(オプション)
  "typings":"dist/types/index.d.ts", //typescript用型ファイル(オプション)
  "license": "MIT",
  "author": "your name",
  "files": [
    "dist" // npm publish 対象のフォルダ
  ],
  "dependencies": {}, // distのみ公開の場合はdependenciesの中は空でOK
  "peerDependencies": { // 依存しているライブラリ(オプション)
    "vue": "^2.6.6",
    "vue-router": "^3.0.2"
  },
  "private": false,
  ...
}
```
npm publishに必要な設定はmainにエントリーポイントのパス設定と、filesでnpm にアップする対象を設定する。
privateをfalseに。
dependenciesにはdistだけを公開する場合は何も書かなくていい。
必要最低限の設定はそれだけであとはオプション。

ちなみに以下のファイルは、filesに指定しなくても自動的にアップされる。

- package.json
- README
- CHANGELOG
- LICENSE / LICENCE

unpkgとjsdelivrはCDN配布用で、設定するとそれぞれ
`https://unpkg.com/your-library-name@latest` 
`https://cdn.jsdelivr.net/npm/your-library-name@latest`
というURLでjsファイルにアクセスできるようになる。
htmlのscriptタグのsrcで直接読み込む方式だ。


他にもいろいろ設定があるけど、githubに公開されてるvueとかvuetifyとかのpackage.jsonを見てみると参考になる。

---
## npm login
ビルドの設定が終わったら次はいよいよnpmに公開する作業だ。
npm用のアカウントを作成してから、コンソールでログインする。
### npm サインアップ
https://www.npmjs.com/signup

### npm login

```shell
$ npm login
```

---
## npm publish

```shell
$ npm run build-bundle
$ npm publish
```

---
## npm 公開完了
``` https://www.npmjs.com/package/your-package-name ```のようなURLで公開確認できる。

https://www.npmjs.com/package/vuterial

---
## npm install example
npm に公開できたらプロジェクトを作成してnpm installしてみよう。

```shell
$ vue create my-project
$ cd vmy-project
$ npm i your-library-name
```

---
## ライブラリをimport
ライブラリをimportしてVue.use()で設定する。
また、cssも使う場合は別途import。

```javascript:main.js
import Vue from 'vue'
import YourLibraryName from 'your-library-name'
import 'your-library-name/dist/your-library-name.css'
Vue.use(YourLibraryName)
```
---
##　まとめ
Vue コンポーネントをnpmに公開する場合もVue CLI 3を使うと簡単。

---