Vue.jsで作ったオリジナルコンポーネントをnpm・CDNに公開してみた！
2021.12.20
Vue.js でオリジナルコンポーネントを作ってみる
近年、種類が増えている JavaScript フレームワーク。
なかでも、「Vue.js」は学習コストが低いことで人気を博しています。
そんな「Vue.js」で、オリジナルコンポーネントを作って、誰でも使えるよう npm に公開してみましょう。
開発環境の準備
まずは、Vue.js の開発・ビルド環境を準備したいと思います。
前提として、nmp をインストールしておきましょう！
今回使用する環境は、以下の通りです。
| npm | v6.14.4 |
| Vue (Vue CLI) | v4.3.1 |
Vue CLI のインストール
Vue CLI とは？
「Vue CLI」は、素早く Vue アプリを開発する為の支援ツールです。
- コマンド1つで Vue プロジェクトが作れる
- webpack も同時にインストールされる
こうした特徴のおかげで、簡単に npm 公開のためのビルドが出来ます。
Vue CLI のインストール
ターミナルを起動して、次のコマンドを入力しましょう。
1 | npm install -g @vue/cli |
インストールが完了したら、バージョンを表示して正常にインストールされたか確認します。
1 2 | $ vue --version @vue/cli 4.3.1 ← バージョンが表示されればインストール成功です |
Vue プロジェクトの作成
公開するコンポーネントの「Vue プロジェクト」します。
次のイメージを見て下さい。
今回は、＠以下の部分を「ドロップダウン」で選択する「メールアドレス入力コンポーネント」を作成し、npm に公開しようと思います。
プロジェクトを作成
最初に、次のコマンドで 「Vue プロジェクト」を作成します。
プロジェクト名は「dropdown-mail-input」とします。
1 2 3 | vue create dropdown-mail-input ? Please pick a preset: default (babel, eslint) ←Enterでデフォルトのプリセットを選択します |
モジュールのインストール
次に、必要なモジュールをインストールしましょう。
プロジェクトフォルダへ移動後、 npm installを入力してください。
1 2 | cd dropdown-mail-input npm install |
コンポーネントの作成
上で作成したプロジェクトに、「npm に公開するコンポーネント」を作成していきます。
ファイルを作成
プロジェクト名/src/components/フォルダに DropdownMailInput.vueという名前でファイルを作成します。
次に、次のコードを入力します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <template> <div> <input type="text" v-model="inputValue" @change="onChange" /> @ <select v-model="selectedValue" @change="onChange"> <option v-for="(domain, index) in domains" :key="index"> {{domain}} </option> </select> </div> </template> <script> export default { props: { value: { default: "" }, domains: { default: ["docomo.ne.jp", "au.com", "softbank.ne.jp"] }, }, data() { return { inputValue: "", selectedValue: "" } }, methods: { onChange() { this.$emit('input', this.inputValue + "@" + this.selectedValue) } } } </script> |
ポイント
Vue コードの詳細な説明は省きますが、ポイントは以下の2つです。
- ドメインを外部設定できるよう、プロパティとして宣言
- メールアドレスを親コンポーネントの v-model でバインドできるよう、入力変更時に「input」イベントを発生させる
動作確認
npm 公開前に、「動作に支障があるようなバグ」は取り除いておきましょう！
上記で作成したコンポーネントが、正しく動作するかをテストしてみます。
コンポーネントを追加
プロジェクト名/src/components/App.vueに、作成した「メールアドレス入力コンポーネント」を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <template> <div id="app"> <div> <DropdownMailInput v-model="mail" :domains="['gmail.com', 'yahoo.co.jp']"/> </div> <p>入力されたアドレス：{{mail}}</p> </div> </template> <script> import DropdownMailInput from './components/DropdownMailInput.vue' export default { name: 'App', components: { DropdownMailInput }, data() { return { mail: "" } } } </script> |
デバッグ起動
上のコードを保存したら、ローカルでデバッグ起動します。
ターミナルで、次のコマンドを入力しましょう。
1 | npm run serve |
動作確認
ブラウザで http://localhost:8080/を開きます。
「メールアドレス」と「ドメインデータ」が、プロパティに正しくバインドされているかを確認します。
npm に公開するためのビルド設定
動作確認をしたら、次は package.jsonを開き、npm に公開する為の設定をしていきます。
基本情報の設定
「コンポーネント名」「バージョン」「ライセンス」など、公開する為の基本情報を設定します。
特に、ライセンス表記は、 package.jsonに忘れずに設定しておきましょう。
1 2 3 4 5 6 7 8 9 10 | { "name": "dropdown-mail-input", //npmとCDNに公開するコンポーネント名 "version": "0.1.0", //バージョン "private": false, //公開（false）に変更 "main": "dist/dropdown-mail-input.common.js", //エントリポイント "license": "MIT", //ライセンス "author": "<作成者>", //作成者 "files": [ "dist" ], //公開するフォルダ "keywords": ["Vue", "Vue.js"] //キーワード } |
ライブラリ用のビルド設定
1 2 3 4 5 6 | { "scripts": { ~~中略~~ "build-bundle": "vue-cli-service build --target lib --name dropdown-mail-input ./src/libmain.js" //ライブラリビルド設定を追加 } } |
ビルド
package.jsonの編集内容を保存したら、ライブラリ用の「Vueプロジェクト」をビルドします。
1 | npm run build-bundle |
いざ公開！
それでは、作成したコンポーネントを npm に公開しましょう！
npm アカウントを準備
npm 公開には、npm アカウントが必須です。
未登録の場合は、以下から登録を行ってください。
【npm】
https://www.npmjs.com/signup
npm にログイン
まずは、次のコマンドで npm にログインします。
1 | npm login |
コンポーネントを公開
次に「npm publish」コマンドで、コンポーネントを npm に公開します。
1 | npm publish |
コンポーネントを検索
コマンドが完了したら、npm のトップページにアクセスし、公開したコンポーネントを検索します。
公開成功！
検索結果をクリックして、以下のように表示されれば、公開成功です。
公開したコンポーネントを使う
ちなみに、npm に公開したコンポーネントを実際に使うには、2つの方法があります。
- npm からインストールして使う方法
- CDN 経由で使う方法
npm インストールして使う
npm からのインストール方法は、一般的な npm ライブラリと同じです。
npm i <コンポーネント名>を使用しましょう。
1 | npm i dropdown-mail-input |
CDN 経由で使う
npm にコンポーネントを公開すると、CDN の「jsdelivr」「unpkg」からも利用できます。
まずは、 <script src="url">でコンポーネントを取得しましょう。
その後、 Vue.use()でコンポーネントを使用できるようにします。
unpkg の場合
1 2 3 4 5 | <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Vue本体--> <script src="https://unpkg.com/dropdown-mail-input@0.1.0"></script> <!-- 今回公開したコンポーネント --> <script> Vue.use(window["dropdown-mail-input"]) </script> |
jsdelivr の場合
1 2 3 4 5 | <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/dropdown-mail-input@0.2.0"></script> <script> Vue.use(window["dropdown-mail-input"]) </script> |
さいごに
今回は、「Vue.js でオリジナルコンポーネントを公開する方法」を解説してきました。
この記事を見ても分かる通り、手順はいたって簡単です。
是非、気軽に挑戦してみてください！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
- ITエンタメ7月 14, 2023【クリス・ワンストラス】GitHubが出来るまでとソフトウェアの未来
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
