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;
- Vue.jsでライブラリを実装
- main.js で実装したモジュールをexport する
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
- 3分でできるnpmモジュール
https://qiita.com/fnobi/items/f6b1574fb9f4518ed520 - npm-package.json | npm Documentation
https://docs.npmjs.com/files/package.json - package.jsonの中身を理解する
https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847
Vue.jsでライブラリを作成してnpmで配布してみる
By Akira Kanno
Vue.jsでライブラリを作成してnpmで配布してみる
- 761