Vue CLIのプロダクションビルドからMirageを除外する

Mirageは開発ツールなので、プロダクション用にアプリをビルドするときは、Vue CLIでMirageを除外するように設定する必要があります。これにより、miragejsライブラリがアプリに含まれなくなり、ユーザーが不要なコードをダウンロードしないようにできます。

このためには、vue.config.jsファイルを使用できます。

ステップ1：null-loaderをインストールする

null-loaderライブラリをプロジェクトに追加します。

# Using npm
npm install --save-dev null-loader

# Using yarn
yarn add -D null-loader

ステップ2：Mirageを空のパッケージで置き換える

次に、vue.config.jsに以下を追加します。

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    if (
      process.env.NODE_ENV === "production" &&
      process.env.MIRAGE_ENABLED !== "true"
    ) {
      config.module
        .rule("exclude-mirage")
        .test(/node_modules\/miragejs\//)
        .use("null-loader")
        .loader("null-loader")
    }
  },
}

これにより、プロダクション用にビルドするときに、アプリ内のmiragejsモジュールが空のモジュールで置き換えられます。

ステップ3：Serverへのプロダクションランタイム呼び出しがないことを確認する

miragejsを空のモジュールで置き換えたので、プロダクションランタイムコードでmakeServerを呼び出したり、MirageのAPIを使用したりしないようにする必要があります。これらのAPIは存在しなくなったためです。

Mirageを開始するコードがprocess.env.NODE_ENVチェックでラップされていることを確認することで、それを行うことができます。

// src/main.js
import Vue from "vue"
import App from "./App.vue"
import { makeServer } from "./server"

Vue.config.productionTip = false

if (process.env.NODE_ENV === "development") {
  makeServer()
}

new Vue({
  render: (h) => h(App),
}).$mount("#app")

この設定により、Mirageはプロダクション環境に含まれることも、アクセスされることもなくなります。

Vue Test Utils