背景

フロントエンドが全然わかっていない。
例えばかの有名な、Angular, React, Vueあたりに触ったことがないので、
個人的に今熱そうなVuejsに触れて見ることにした。
目標は自作ライブラリ公開にした

Nuxt.js

とりあえず公式見ながら適当に遊んでいたら、
いつの間にかフレームワークのNuxt.jsを使っていた。

Nuxt.js はユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。

まあ、とりあえず良しとする

外部ライブラリ呼び出しを学ぶ

適当なライブラリをインポートして遊んでみることにする。
vue-typerが直感的に使えそうだったのでnuxtにインポートしてみた。
これだけでも初見だと難しかったが、検索エンジンを駆使してなんとか。

npm installする
ロード用のpluginを作る

root/plugins/vue-typer.js


import Vue from 'vue'
import VueTyper from 'vue-typer'

Vue.use(VueTyper)

nuxt.config.jsに登録する

nuxt.config.js


plugins: [
    { src: '~plugins/vue-typer.js', ssr: false },
]

コンポーネントを呼び出す

pages/index.vue

    <no-ssr>
      <vue-typer text='Hello World! I was registered locally!'></vue-typer>
    </no-ssr>

no-ssrで呼ばなければエラー出るようだ。（サーバーサイドレンダリングしない）

ざっとVueライブラリの形が見えてきたので
今度はそれに習い、コンポーネントを作ってみる。

コンポーネント作成まで

まずはローカルで作成することにする

vue-typerの動きだけを模倣するような、コンポーネントをローカルで作った。
そのあとはそれを加工して、こんな感じで文章がランダムで構築されていくように見えるコンポーネントを作った。

ページリロードのたびに実行される
毎回ランダムな順番に文字列を組み立てる（上の画像はgifなんで同じですが）

良い名前が思いつかなかったので、vue-chara-builderと名付けた。

ソースコード

ライブラリにしよう

ライブラリ公開の方法はこちらを参考にさせていただきました。ありがとうございます！
https://allabout-tech.hatenablog.com/entry/2018/03/22/124300

なので基本はそちらを見てもらった方が良いかとは思いますが、初心者視点から簡単に解説を。

ライブラリ公開用に別の環境を作ろう

vue-cliなどで、別のディレクトリに環境を一個作る

ローカルで作成したライブラリをその環境に移す

npm用にwebpack.config.jsとpackage.jsonを用意する

npmにアップロードしたり、インストールするために用意する
書き方はコピペになってしまうので上記サイトをご参考ください。
なお、ライブラリ名は自身のものに合わせる

npm run buildで公開用jsを作成しよう

webpack.config.jsに設定した内容に沿ってビルドされ、
dist以下にライブラリ名のjsが生成される
極論こいつさえあればライブラリは動く。（たぶん）

READMEを書こう

まあ後でもいいのですが、書いておいた方が良いです。

githubにcommitしてpushしよう（任意）

多分なくても良い、のかな。

npmのアカウント作成しよう

https://www.npmjs.com/
ここでregistする。
なお、登録後に届いたメールの認証をしておかないと次に進めない

npmアカウントをライブラリと紐付けよう

$npm adduserでライブラリとアカウントを紐付けられます。

ライブラリをpushしよう

$npm publishでライブラリをnpmに配置できます

落とし穴

メインは
dist/vue-chara-builder.js
ってファイルだったんですが、最初はgitignoreされていてpushされてなかったんで
npm installしてもライブラリが見つかりません、って怒られた。

npmに配置できた

更新するときは

$npm version patchでライブラリのバージョンをあげて
$npm publishで更新可能

ライブラリを使おう

さて、npmには無事登録できたので、npmを経由して使ってみよう

npm install

npm install xxxxxでインストールしよう

ライブラリを読み込もう

上の方で書いてる「外部ライブラリを読み込もう」と同じことをする。

これで、無事npm経由で自作ライブラリを読み込むことができました。

感想とか

正直今回のライブラリではあまりVuejsの良さを引き出せるようなものではなかったのですが、
興味を持つとっかかりとしてはやって良かったなあ、と思いました。

nuxtjsの実行環境はDockerコンテナをベースにしているので、
もしかしたらローカルとは何か違っていたりするかもしれません。

また、nuxtjs使わずにVueだけでライブラリを読み込む場合だったら、
vueへインポートする手法に差が出るかと思いますのでご注意ください。
（そっちはググればいっぱい出てきます）

学ぶ前にtry&errorでいつもやっちゃうのでなんか間違ってたらごめんなさい。。

Vueライブラリをnuxtで作ってnpmに公開してみる

背景