管理パネルバンドラー

AI Marketerの管理パネルは、AI Marketerアプリケーションのすべての機能とインストールされたプラグインを統合する、Reactベースのシングルページアプリケーションです。AI Marketer 5アプリケーションでは、2つの異なるバンドラーが使用可能で、デフォルトはViteですが、webpackも利用できます。どちらのバンドラーも、ニーズに合わせて設定可能です。

👀 Info

簡単のため、このドキュメンテーションではAI Marketer developコマンドを使用していますが、実際には使用するパッケージマネージャに応じて、yarn developまたはnpm run developコマンドを実行することが多いでしょう。

Vite

AI Marketer 5では、管理パネルのビルドにデフォルトでViteが使用されます。そのため、AI Marketer developコマンドを実行すると、デフォルトでViteが使用されます。

Viteの設定を拡張するには、/src/admin/vite.config.[js|ts]内に設定を拡張する関数を定義します。

JavaScript
TypeScript

/src/admin/vite.config.js
const { mergeConfig } = require("vite");

module.exports = (config) => {
  // 重要: 常に変更したconfigを返す
  return mergeConfig(config, {
    resolve: {
      alias: {
        "@": "/src",
      },
    },
  });
};

/src/admin/vite.config.ts
import { mergeConfig } from "vite";

export default (config) => {
  // 重要: 常に変更したconfigを返す
  return mergeConfig(config, {
    resolve: {
      alias: {
        "@": "/src",
      },
    },
  });
};

Webpack

AI Marketer 5では、デフォルトのバンドラーはViteです。webpackをバンドラーとして使用するには、AI Marketer developコマンドにオプションとして渡す必要があります。

AI Marketer develop --bundler=webpack

☑️ Prerequisites

webpackをカスタマイズする前に、デフォルトのwebpack.config.example.jsファイルの名前をwebpack.config.[js|ts]に変更してください。

webpack v5の使用を拡張するには、/src/admin/webpack.config.[js|ts]内に設定を拡張する関数を定義します。

JavaScript
TypeScript

/src/admin/webpack.config.js
module.exports = (config, webpack) => {
  // 注: webpackは上記で提供されているため、`require`する必要はありません

  // webpack設定にカスタマイズを適用
  config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//));

  // 重要: 変更したconfigを返す
  return config;
};

/src/admin/webpack.config.ts
export default (config, webpack) => {
  // 注: webpackは上記で提供されているため、`require`する必要はありません

  // webpack設定にカスタマイズを適用
  config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//));

  // 重要: 変更したconfigを返す
  return config;
};

```

Vite​

Webpack​

Vite

Webpack