Vue CLIでVue.jsプロジェクトをライブラリにビルドする

Vue CLI 3のvue-cli-service buildにtargetオプション（ビルドターゲット）を指定することで、Vueプロジェクトをライブラリ形式にビルドできる。指定できるtargetオプションは以下の通り。

• App

  • コマンド：vue-cli-service build (--target app)
  • デフォルトのビルドターゲット
  • 依存ライブラリをリンクしたindex.htmlが生成される。
  • publicディレクトリの静的コンテンツもコピーされる。

• Library

  • コマンド：vue-cli-service build --target lib [name] [entry]

  • [entry]に指定したVueコンポーネントもしくはjsファイルをエントリーポイントとして、CommonJSとUMD形式で出力される。

  • Vueはバンドルされず、静的コンテンツもコピーされない。

  • 使用例

    <script src="https://.../vue.js"></script>
    <script src="https://.../myLib.js"></script>
    <link rel="stylesheet" href="./myLib.css">
    
    <div id="app">
      <my-lib></my-lib>
    </div>
    
    <script>
    new Vue({
      components: {
        'my-lib': myLib
      }
    }).$mount('#app')
    </script>
    

  • IEをサポートするには、current-script-polyfillを読み込む必要がある。

• Web Component

  • コマンド：vue-cli-service build --target wc [name] [entry]

  • [entry]に指定したVueコンポーネントをエントリーポイントとして、Web Componentとして出力される。

  • Vueはバンドルされず、静的コンテンツもコピーされない。

  • 使用例

    <script src="https://.../vue.js"></script>
    <script src="https://.../my-wc.js"></script>
    
    <my-wc></my-wc>
    

  • IE 11以下はサポートされない。

おまけ：package.jsonへのビルドコマンド追加

Vue CLIで作成したプロジェクトであればpackage.jsonにビルドコマンドが記載されているため、ライブラリ用のビルドコマンドもそこに追加してしまうのがよい。

package.json記述例

{
  "scripts": {
    "build:lib": "vue-cli-service build --target lib myLib",