# Vuetify で作ったアプリの一部を再利用するためにパッケージ化して npm に登録する方法

# はじめに

わからなかったので検索した結果、この目的にあまり適切でないドキュメント (opens new window)を不運にも読んでしまって、そこからまる二日嵌ってしまいました

# 正解

実際は特別な準備は不要で

エントリーポイントを作る
vue-cli で最初から出来ている package.json に、いくつかの要素を追加する
パッケージに build して publish する

これだけで OK でした。これが「なんだ、当たり前の手順じゃん」と思われる方は以下はただの駄文なのでよまなくてOKです

当たり前に思わない方も、読後は「なんだ、当たり前の事書いてただけじゃん」って思っていただけるように以下を書いてみようと思います

# 1. エントリーポイントを作る

再利用したい要素を import して、それらを export するエントリーポイントの .js ファイルをつくります。例えばこんな (opens new window)かんじ

import AccountFront from './views/account/AccountFront.vue';
import PurchaseFront from './views/purchase/PurchaseFront.vue';
import AccountRoutes from '@/views/account/account.route.js'
import PurchaseRoutes from '@/views/purchase/purchase.route.js'
import Login from '@/components/Login.vue'
import EmailVerificationRequest from '@/components/EmailVerificationRequest.vue'


// Named export
export {
	AccountFront,
	AccountRoutes,
	PurchaseFront,
	PurchaseRoutes,
	Login,
	EmailVerificationRequest
};

// Default export
export default {
	AccountFront,
	AccountRoutes,
	PurchaseFront,
	PurchaseRoutes,
	Login,
	EmailVerificationRequest
};

import してきて export する要素はコンポーネントでも関数でも変数でもなんでもOKです

コンポーネントは Vuetify を使ってても OK です、そのような依存性の解決は package.json の定義を通じて npm がすでに済ませてくれてます

エントリーポイントのファイルを置く場所は、後で package.json に書くのでどこでもいいと思うのですが、/src 直下においてらっしゃる方 (opens new window)を私はマネしました

# 2. vue-cli で最初から出来ている package.json に、いくつかの要素を追加する

必須の要素は

private
scripts に vue-cli-service build --target lib
main
files

あといくつか書いておくとカッコいい要素があります

# 1. private

vue-cli が生成した package.json だとデフォルトで private が true になっています。もし、npm にお金はらってて private package が作れるのであれば、そのままにしておくと private package として登録してくれます。そうでないのであればここを false に変更します

  {
  "name": "vue-faui-user-fe",
  "version": "1.0.2",
  "description": "A user account frontend with firebase auth ui",
  "author": "Dr Takeyuki UEDA",
  "private": false,
  "scripts": {
}

# 2. scripts に `vue-cli-service build --target lib`

vue-cli は packaging のためのコマンドを vue-cli-service build として用意してくれています。コマンドの詳細はこちら (opens new window)

ここでは以下のオプションを使います

--target lib: ライブラリとしてパッケージングします
--name パッケージの名前: ここで指定した名前で npm に登録されます
--formats umd: 指定しないと commonjs,umd,umd-min 全部が生成されますので、なくてもいいのですが指定すると指定したフォーマットのファイルだけが build されます

そして、先程つくったエントリーポイントへのパスを末尾に加えて、例えば build-bundle みたいな名前でこんなかんじ (opens new window)に scripts に登録します

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-bundle": "vue-cli-service build --target lib --name vue-faui-user-fe --formats umd ./src/build-entry.js",
    "build-serve": "npx serve -s dist",
    "lint": "vue-cli-service lint",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "docs:eject": "vuepress eject docs"
  },

# 3. main

上で作った "build-bundle" スクリプトで生成されるファイルのうち、deploy したいファイルのパスをここに書きます

 "main": "./dist/vue-faui-user-fe.umd.js",

npm のドキュメント (opens new window)見るともっとカッコいいことがかいてあって、カッコいいなと思いますが行間を読む能力がもとめられてて、フロントエンドの人ってこいうのふつうにこなせて頭いいんだなと思います

# 4. files

package に含めたいファイルをここにこんなかんじ (opens new window)で列挙します、上で作ったエントリーポイントを忘れずに

  "files": [
    "dist/*",
    "src/components/*.vue",
    "router/*",
    "src/views/account/*",
    "src/views/purchase/*",
    "src/build-entry.js"
  ],

# 5. その他必須ではない要素

author とか license とかいろいろ書いておくと npm のプロダクトのページがカッコよくなるみたいです。詳細は package.json のドキュメント (opens new window)を

# 3. パッケージに build して publish する

npm にアカウントをつくってあとは

npm run build-bundle or yarn build-bundle

して

npm publish or yarn publish

すればできあがり、ハマる要素なにもないですね

# 蛇足：そもそもなぜハマったのか、どうやって抜け出したのか

知ってしまえば全然自然な手順なのですが、しらないで冒頭のドキュメント (opens new window)を読んでしまったのがハマりのはじまりでした

しかも、これ、どのような人に何を伝えようとしているドキュメントなのかすら未だにわからない。多分、タイトルに反して 「Vue コンポーネントを npm パッケージ化する」 方法を知りたい人が対象なんじゃなくて、そんなことよくわかってる人に、なんかカッコいいことを伝えようとしてるんだろうと想像しますけどフロントエンドの知識と経験が貧弱なせいだとおもうのですが私には理解不能

で、末尾あたりにでてくる vue-sfc-rollup (opens new window) を使えばいいのか？と早合点して使ってみると、たしかに vue のパッケージはできるのですが、vuetify 含めると無慈悲なエラーが、stack overflow みても「これはうちの問題じゃない」みたいな冷たい回答だし

そういえば、以前に v-bind="$attrs"の使い方みて感動した vuetify-markdown-editor (opens new window) はどうやってるんだろう？とおもって見てみたら、なにも変わった事をしていない???

でもよく見ると package.json にしらない要素がいくつかある、これなんだろ??? っとググって、わかってきたことを試してみて、ついでに package.json のドキュメント (opens new window)を真剣に読んで、上の結論にまでたどり着いたのでした、ああ大変だった

# 感想

カッコいいプロジェクトのコードってどんな所も参考になるので、やっぱカッコいい人のコードの多読っていいかも

← Vuetify で activator を使わないでダイアログを開け締めする方法 ja/Vuetify →