Vue CLI ビルドターゲット

vue-cli-service build を実行するときは、--target オプションを使用して別のビルドターゲットを指定できます。同じソースコードを使用して、さまざまなユースケースに応じてさまざまなビルドを生成できます。

応用

アプリケーションモードがデフォルトのモードです。このパターンでは:

Index.html には、注入されたリソースとリソースヒントが含まれます
キャッシュを改善するために、サードパーティのライブラリは別のパッケージに分割されます。
4kb 未満の静的リソースは JavaScript でインライン化されます
パブリックの静的リソースは出力ディレクトリにコピーされます

図書館

IEの互換性に関する注意事項

ライブラリモードでは、プロジェクトの publicPath は、メインファイルのロードパスに従って動的に設定されます(動的リソースロード機能をサポートするため)。ただし、この機能は document.currentScript を使用するため、IE ブラウザはこの機能をサポートしていません。したがって、Web サイトが IE をサポートする必要がある場合は、ライブラリを使用する前にページにcurrent-script-polyfillを導入することをお勧めします。

Vue への依存関係に注意してください

ライブラリモードでは、Vue は外部です。これは、コードに Vue をインポートした場合でも、パッケージには Vue が存在しないことを意味します。ライブラリがバンドラーを通じて使用される場合、依存関係としてバンドラーを通じて Vue をロードしようとします。それ以外の場合は、グローバル Vue 変数にフォールバックします。

この動作を回避するには、ビルドコマンドに --inline-vue フラグを追加します。

vue-cli-service build --target lib --inline-vue

次のコマンドを使用して、単一のエントリをライブラリとして構築できます。

vue-cli-service build --target lib --name myLib [entry]

File                     Size                     Gzipped

dist/myLib.umd.min.js    13.28 kb                 8.42 kb
dist/myLib.umd.js        20.95 kb                 10.22 kb
dist/myLib.common.js     20.57 kb                 10.09 kb
dist/myLib.css           0.33 kb                  0.23 kb

このエントリは、.js ファイルまたは .vue ファイルにすることができます。エントリが指定されていない場合は、src/App.vue が使用されます。

ライブラリを構築すると、次の出力が出力されます。

dist/myLib.common.js: バンドラー用 CommonJS パッケージ (残念ながら、webpack はまだ ES モジュール出力形式をサポートしていません)
dist/myLib.umd.js: ブラウザまたは AMD ローダー用の直接の UMD パッケージ
dist/myLib.umd.min.js: 縮小された UMD ビルド
dist/myLib.css: 抽出された CSS ファイル ( vue.config.js で css: { extract: false } を設定することで強制的にインライン化できます)

警告する

ライブラリまたはマルチプロジェクトリポジトリ (モノリポジトリ) を開発している場合は、CSS のインポートには副作用があることに注意してください。package.json の「sideEffects」: false を必ず削除してください。削除しない場合、CSS ブロックは運用ビルド中に webpack によって破棄されます。

Vue と JS/TS エントリファイルの比較

.vue ファイルをエントリポイントとして使用する場合、コンポーネントはデフォルトで常にエクスポートされるため、ライブラリは Vue コンポーネント自体を直接公開します。

ただし、.js または .ts ファイルをエントリポイントとして使用する場合、名前付きエクスポートが含まれる可能性があるため、ライブラリはモジュールとして公開されます。つまり、UMD ビルドでは window.yourLib.default 経由で、CommonJS ビルドでは const myLib = require('mylib').default 経由でライブラリにアクセスする必要があります。名前付きエクスポートがなく、デフォルトのエクスポートを直接公開したい場合は、 vue.config.js で次の Webpack 構成を使用できます。

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default'
    }
  }
}

Web コンポーネントコンポーネント

互換性に関するヒント

Web コンポーネントモードは、IE11 以前のバージョンをサポートしていません。さらに詳しく

Vue への依存関係に注意してください

Web コンポーネントパターンでは、Vue は外部です。これは、コードに Vue をインポートした場合でも、パッケージには Vue が存在しないことを意味します。ここでのパッケージは、ページ内で利用可能なグローバル変数 Vue がすでに存在することを前提としています。

次のコマンドを使用して、単一のエントリを Web コンポーネントコンポーネントとして構築できます。

vue-cli-service build --target wc --name my-element [entry]

ここでのエントリは *.vue ファイルである必要があることに注意してください。Vue CLI はこのコンポーネントを自動的にラップして Web コンポーネントコンポーネントとして登録します。main.js に登録する必要はありません。開発中にデモアプリとして main.js だけを使用することもできます。

ビルドでは、すべてがインライン化された単一の JavaScript ファイル (およびその縮小バージョン) が生成されます。このスクリプトが Web ページにインポートされると、@vue/web-component-wrapper を使用してターゲットの Vue コンポーネントをラップするカスタムコンポーネント <my-element> が登録されます。このラッパーは、プロパティ、属性、イベント、スロットを自動的にプロキシします。詳細については、@vue/web-component-wrapper のドキュメントを参照してください。

このパッケージは、ページ上でグローバルに利用できる Vue に依存していることに注意してください。

このパターンにより、コンポーネントのコンシューマーは、Vue コンポーネントを通常の DOM 要素として使用できるようになります。

<script src="https://unpkg.com/vue" rel="external nofollow"  rel="external nofollow" ></script>
<script src="path/to/my-element.js"></script>

<!-- 可在普通 HTML 中或者其它任何框架中使用 -->
<my-element></my-element>

複数の Web Components コンポーネントを登録するパッケージ

Web コンポーネントパッケージを構築するときは、glob 式をエントリとして使用して、複数のコンポーネントターゲットを指定することもできます。

vue-cli-service build --target wc --name foo 'src/components/*.vue'

複数の Web コンポーネントを構築する場合、 --name を使用してプレフィックスを設定し、カスタム要素の名前はコンポーネントのファイル名から推測されます。たとえば、HelloWorld.vue という名前のコンポーネントに --name foo を指定すると、<foo-hello-world> という名前のカスタム要素が生成されます。

非同期 Web コンポーネントのコンポーネント

複数の Web コンポーネントをターゲットにすると、バンドルが非常に大きくなる可能性があり、ユーザーはバンドルに登録されているコンポーネントのサブセットのみを使用したい場合があります。このとき、非同期 Web コンポーネントモードは、すべてのコンポーネントで共有されるランタイムを含むコード分割パッケージを生成し、すべてのカスタムコンポーネントの小さなエントリファイルを事前登録します。コンポーネントの実際の実装は、カスタム要素の対応するインスタンスがページで使用されている場合にのみ、オンデマンドで取得されます。

vue-cli-service build --target wc-async --name foo 'src/components/*.vue'

File                Size                        Gzipped

dist/foo.0.min.js    12.80 kb                    8.09 kb
dist/foo.min.js      7.45 kb                     3.17 kb
dist/foo.1.min.js    2.91 kb                     1.02 kb
dist/foo.js          22.51 kb                    6.67 kb
dist/foo.0.js        17.27 kb                    8.83 kb
dist/foo.1.js        5.24 kb                     1.64 kb

これで、ユーザーはこのページで Vue とこのエントリファイルを導入するだけで済みます。

<script src="https://unpkg.com/vue" rel="external nofollow"  rel="external nofollow" ></script>
<script src="path/to/foo.min.js"></script>

<!-- foo-one 的实现的 chunk 会在用到的时候自动获取 -->
<foo-one></foo-one>