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

自己紹介

@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/

---

サンプル(ドキュメントページ)

---

コンポーネントをnpm publish して公開する手順

• Vue CLI 3でプロジェクトを作成
• build設定
• package.json設定
• npmjsにサインアップ
• npm publish

---

Vue CLI 3でプロジェクトを作成

ライブラリを作成する場合もWebアプリと作るのと同様にVue CLIから作成します。

$ npm i -g @vue/cli
$ vue create your-library-name

特にライブラリ用に特殊な設定は必要ないので自分の好きなように設定しよう。
ライブラリ名は名前が被ってないかnpmjs.comでチェックしておきましょう。

---

Build設定

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

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

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

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結果

$ npm run build-bundle

./distフォルダに以下のファイルが出力される

./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)の形式で使うことになる。以下一例。

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の設定

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 サインアップ

npm login

$ npm login

---

npm publish

$ npm run build-bundle
$ npm publish

---

npm 公開完了

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

---

npm install example

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

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

---

ライブラリをimport

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

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を使うと簡単。

---