vue-cli 3.0でコンポーネントライブラリを作成

vue-cli 3.0 がRCになったということで、単一ファイルコンポーネントのライブラリをビルドする方法をまとめておく。

とりあえずはVue.jsをscriptタグ直接組み込みで使っている既存案件でも使えるようにUMDビルドができれば良しとする。

vue-cliのインストール

$ npm install -g @vue/cli

プロジェクト作成

実際に開発するときはテスト系も入れるが、今回はビルドできればいいので以下のようにしておく。

$ vue create my-component

Vue CLI v3.0.0-rc.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

package.jsonにスクリプト追加

公式ドキュメントを参考にして以下のようにしておく。

"scripts": {
    "build:lib": "vue-cli-service build --target lib --name MyComponent ./src/components/index.js"
  }

エントリーポイント作成

src/components/index.jsを作成する。
※ここが一番理解できてないが、とりあえずこんな感じで良いのかな?
※修正:2018/06/18

import HelloWorld from './HelloWorld.vue'

function install(Vue) {
  Vue.component('HelloWorld', HelloWorld)
}

export default install

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use({
    install
  })
}

ビルド

以下のコマンドを実行すればdistディレクトリにビルドされたjsファイルが作成される。

$ npm run build:lib

umdビルドの使用方法

※修正:2018/06/18

<div id="app">
   <hello-world msg="あいうえお" />
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="MyComponent.umd.js"></script><!-- ←ビルドしたやつ -->
<script type="text/javascript">

new Vue({
}).$mount('#app');

</script>

正直このやり方で合ってるのか自信がないので、誤った情報だったら記事を訂正します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください