随分ひさしぶりに書く気がする。まーなんか寝れないので何となく書こう。
Vueでコンポートネントを色々作って行くんだけど、規模が大きくなったり、別のプロジェクトで使いたくなった場合とか、どうにか簡単にやりたい。イメージ的にはelement-ui的に、Vueプラグインとしてインストールしたらすぐ使える的な感じ。npmのモジュールとして使えるようにしたいわけです。
で、これをやるにはWebPackとかBabelとかもろもろ激しく設定しなきゃいけなさそうで、ちょっとゲンナリしてたんだけど、Vue-cli3を使うと割と簡単にできたので、そのやり方。
あと、作ったモジュールはverdaccio（なんて読むの？）を使ってプライベートリポジトリに登録して、ちんまり使うようにする。自分恥ずかしがり屋なもんで。
2019/2/27追記
verdaccio：ヴェルダッチォって発音してるっぽ。イタリア語で「緑で描く」、「黄、黒、緑の土を混ぜたもの」みたいな意味らしいけど、絵画を描くときに塗る下地？の色ってことっぽ。そんな感じのニュアンスなんでしょか。
で、これはカタカナでなんて書けばいいんだろか、ベルダッチョはカッコ悪いしの。ベルダチオでいいか。。。
今回のサンプルは下記に上げてます。
https://github.com/n79s/vue-npm-module-sample
①Vue-Cli3のインスト
npm install -g @vue/cli
②コンポーネント作るようのプロジェクトを用意
vue create my-hello-module
③コンポーネント作る
# 例えばこんな感じ。
<template>
<section>
<h1>Hello World !!!</h1>
<div>Message : {{ msg }}</div>
</section>
</template>
<script>
export default {
name: 'HelloX',
props: {
msg: String
}
}
</script>
<style scoped>
h1 {
margin: 40px 0 0;
color:red;
}
</style>
④公開用のindex.js
import Vue from "vue"
import HelloX from "./HelloX.vue"
import HelloY from "./HelloY.vue"
import HelloZ from "./helloz/HelloZ.vue"
const MyComponents = {
HelloX,
HelloY,
HelloZ
}
Object.keys(MyComponents).forEach(name=>{
Vue.component(name,MyComponents[name])
})
export default MyComponents
⑤ビルドの設定
# package.jsonはこんな感じに変える
・・・
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-x": "vue-cli-service build --target lib --name my-hello-module src/components/index.js",
"lint": "vue-cli-service lint"
},
"main":"./lib/my-hello-module.common.js",
"files": [
"dist/*",
"lib/*",
"src/*",
"public/*",
"*.json",
"*.js"
],
・・・
# vue.config.js(これは自分で作る
// vue.config.js
module.exports = {
// options...
"css":{
"extract":false
},
"outputDir":"lib"
}
package.jsonの"build-x"のところでビルドのコマンド作る。あと、出力先はデフォだとdistだけど、libに変えてる。「vue.config.js」は無くても動くんだけど、細かい設定をしたい場合は必要。で、cssの部分が無いとcssが別ファイルで作成されてしまい、別プロジェクトでインストールしても、cssが適用されず上手くいかないので、上記の感じで書いておかないとダメ。CDN的に公開して、cssは別で読み込んでもらうような場合はいいのかしらね。
⑥ビルド
npm run build-x
ここまでで、libのフォルダが↓の感じになるはず。
そしたら、verdaccioの準備。
# インストール npm install --global verdaccio # 実行 verdaccio
これだけ。デフォで「http://localhost:4873」で動くはず。まず、ユーザ登録する。
npm adduser --registry http://localhost:4873
ID/PASS/Mail入れて終わり。あとは、下記の感じで公開する。
#package.jsonがあるディレクトリで↓を実行 cd my-hello-module #公開 npm publish --registry http://localhost:4873 #確認 npm info my-hello-module --registry http://localhost:4873
プライベートリポジトリへの登録が終わったので別のプロジェクトを作成して↓の感じの事をやる。
#別プロジェクトを作る
vue create use-hello
#プライベートリポジトリからインストール
npm install my-hello-module --save --registry http://localhost:4873
#main.jsに↓の感じでグローバル登録する
import Vue from 'vue'
import App from './App.vue'
//↓↓↓ここ
import HelloComponents from 'my-hello-module'
Object.keys(HelloComponents).forEach(name=>{
Vue.component(name,HelloComponents[name])
})
//↑↑↑ここ
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
グローバル登録しておけば、あとはアプリ側で↓の感じで使える。
<template>
<div id="app">
<HelloLocal msg="Local"/>
<HelloX msg="use-hello X" />
<HelloY msg="use-hello Y" />
<HelloZ msg="use-hello Z" />
</div>
</template>
<script>
import HelloLocal from './components/HelloLocal.vue'
export default {
name: 'app',
components: {
HelloLocal
}
}
</script>
Vue-cli3はかなりいい感じですね。すごく楽。verdaccioも素晴らしい。
あと、StoryBook使って管理してみよ。チームでの作業とか良さげ。
参考
