Vue.js でライブラリを作成して npm で配布してみる

2019/02/20

【ラクスル×KCF】FrontendNight

自己紹介

【ラクスル×KCF】FrontendNight

菅野 彬

  • フロントエンドエンジニア
  • 2019年1月 ラクスルにジョイン
  • 前職はサーバーサイド
    主にJavaとRuby

本日話すこと

【ラクスル×KCF】FrontendNight

  • 実際に作ったものについて
  • npmへライブラリを公開する方法
  • 公開した感想とまとめ

実際に作ったもの

【ラクスル×KCF】FrontendNight

vue-seek-bar

npmで公開するまで

【ラクスル×KCF】FrontendNight

  • npmのアカウント作成
  • ライブラリの実装
  • package.jsonの記述
  • 公開

今回使ったもの

【ラクスル×KCF】FrontendNight

  • npm(パッケージ管理はyarn)
  • Vue.js 2.5.21
  • Vue CLI 3

npmアカウント作成

【ラクスル×KCF】FrontendNight

  • npmのサイトでアカウントを作成
    https://www.npmjs.com
  • 作成したらターミナルから npm adduser
  • ~/.npmrc に token 情報が書き込まれる
mbp% npm adduser
Username: teinen
Password: 
Email: (this IS public) teinen.github@gmail.com
Logged in as teinen on https://registry.npmjs.org/.

ライブラリの実装

【ラクスル×KCF】FrontendNight

$ npm install -g @vue/cli
$ vue create vue-seek-bar
  • Vue CLIをインストール、プロジェクトを作成
// main.js
import VueSeekBar from "./VueSeekBar";

export default VueSeekBar;

package.jsonの記述

【ラクスル×KCF】FrontendNight

{
  "name": "vue-seek-bar",
  "version": "0.1.0",
  "private": false,
  "main": "./dist/vue-seek-bar.umd.js",
  "files": [
    "dist"
  ],
  "scripts": { ... },
  "dependencies": { ... },
  "devDependencies": { ... }
}

必要な設定はいろいろあるが、

name, main, files は特に重要

ライブラリのビルド

【ラクスル×KCF】FrontendNight

  "scripts": {
    "build": "vue-cli-service build --target lib --name vue-seek-bar ./src/main.js",
  },
  • package.jsonのbuildコマンドを修正する
    • --target lib: ライブラリ用のビルド実行
    • --name: ビルドされるファイル名称
    • ./src/main.js: エントリポイント

ライブラリのビルド

【ラクスル×KCF】FrontendNight

$ npm run build

⠹  Building for production as library (commonjs,umd,umd-min)...

 DONE  Compiled successfully in 3936ms                                                              10:53:34

  File                                  Size               Gzipped

  dist/vue-seek-bar.umd.min.js    5.13 KiB           1.81 KiB
  dist/vue-seek-bar.umd.js        18.68 KiB          4.06 KiB
  dist/vue-seek-bar.common.js     18.19 KiB          3.92 KiB
  dist/vue-seek-bar.css           0.33 KiB           0.23 KiB
  • ビルドコマンドを実行⚙
  • プロダクション用のビルドファイルが
    "dist/" 配下に作成される🎉

公開する

【ラクスル×KCF】FrontendNight

  • npm publish するだけ
  • npm install できるようになる🎉

公開した感想とまとめ

【ラクスル×KCF】FrontendNight

  • 実装も含めて数時間で公開まで出来た🎉
    思っていたよりもかなり簡単だった🎉
  • package.json の記述、特に files や main の部分等
    ビルド周りで若干苦戦した
  • Vue CLIを使えば、面倒な設定も殆ど必要無し
  • 100行程度の小さなモジュールでもライブラリとして配布できる!!のでガンガン作っていきたい🎉

参考

【ラクスル×KCF】FrontendNight

Vue.jsでライブラリを作成してnpmで配布してみる

By Akira Kanno

Vue.jsでライブラリを作成してnpmで配布してみる

  • 761