Ionic 如何根据构建类型在Vite中有条件地应用插件?

eyh26e7m  于 2023-04-18  发布在  Ionic
关注(0)|答案(1)|浏览(134)

我正在使用Vite构建一个Ionic React app,它有三个版本:

  • iOS
  • 安卓系统
  • PWA

我使用vite-plugin-compression2来gzip PWA文件。
下面是我的vite.config.ts

plugins: [
    eslint(),
    compression({
      algorithm: 'gzip',
      exclude: [/\.(br)$ /, /\.(gz)$/],
    }),
    // Deleting the originals will break the PWA because index.html gets deleted.
    compression({
      algorithm: 'brotliCompress',
      exclude: [/\.(br)$ /, /\.(gz)$/],
      deleteOriginalAssets: false,
    }),

问题是,这种压缩会破坏我的Android构建,因为Android的gradle试图压缩已经压缩的文件,这会导致duplicate resources错误并中止构建。
所以我想应用的PWA和iOS的压缩插件,但不适用于Android.我该怎么做?
Vite文档描述了构建/服务插件的条件应用,但我需要两种不同的构建方式的条件应用。

8zzbczxx

8zzbczxx1#

我通过添加一个环境变量VITE_BUILD_PWA解决了这个问题。

// https://vitejs.dev/config/
export default ({ mode }) => {
  // Make Vite env vars available.
  // https://stackoverflow.com/a/66389044
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
  const isEnvBuildPwa = () => process.env.VITE_BUILD_PWA === 'true';

  return defineConfig({
    build: {
        // All the build config.
      },
    },
    plugins: [
      eslint(),
      isEnvBuildPwa() && compression({
        algorithm: 'gzip',
        exclude: [/\.(br)$ /, /\.(gz)$/],
      }),
      // Deleting the originals will break the PWA because index.html gets deleted.
      isEnvBuildPwa() && compression({
        algorithm: 'brotliCompress',
        exclude: [/\.(br)$ /, /\.(gz)$/],
        deleteOriginalAssets: false,
      }),
    ],
  });
};

相关问题