如何在TypeScript+React+Vite项目中导入Cordova支付插件？

问题原因 #

cordova-plugin-purchase v13虽提供TypeScript类型定义，但核心代码仍是全局脚本（而非ES模块），仅用import 'cordova-plugin-purchase';只会加载类型声明，不会将全局变量CdvPurchase注入运行环境，导致Web端PWA运行时找不到该变量。

可行解决方案 #

方案1：通过Vite配置自动注入脚本（推荐） #

通过Vite插件自动复制脚本文件并注入到index.html，无需手动修改HTML：

1. 安装静态复制插件：

npm install vite-plugin-static-copy --save-dev

2. 修改vite.config.ts：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  plugins: [
    react(),
    // 构建时将插件脚本复制到dist/assets目录
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/cordova-plugin-purchase/www/store.js',
          dest: 'assets'
        }
      ]
    }),
    // 自动向index.html注入脚本标签
    {
      name: 'inject-cdv-purchase',
      transformIndexHtml(html) {
        const scriptSrc = import.meta.env.PROD 
          ? '/assets/store.js' 
          : '/node_modules/cordova-plugin-purchase/www/store.js';
        return html.replace('</head>', `<script src="${scriptSrc}"></script></head>`);
      }
    }
  ],
  // 确保类型导入正常，无需打包该插件
  resolve: {
    alias: {
      'cordova-plugin-purchase': 'node_modules/cordova-plugin-purchase/types/index.d.ts'
    }
  }
});

3. 保持原有的类型导入：

import 'cordova-plugin-purchase';

此时开发和生产环境都会自动加载脚本，运行时CdvPurchase全局变量可正常访问。

方案2：动态加载脚本（灵活可控） #

通过代码动态注入脚本，确保CdvPurchase加载完成后再使用：

1. 创建工具文件src/utils/cdv-purchase.ts：

// 导入官方类型定义
import type * as CdvPurchase from 'cordova-plugin-purchase';

// 声明全局变量类型
declare global {
  interface Window {
    CdvPurchase: typeof CdvPurchase;
  }
}

export async function initCdvPurchase(): Promise<typeof CdvPurchase> {
  return new Promise((resolve) => {
    // 已加载则直接返回
    if (window.CdvPurchase) {
      resolve(window.CdvPurchase);
      return;
    }

    // 动态创建脚本标签
    const script = document.createElement('script');
    script.src = import.meta.env.PROD 
      ? '/assets/store.js' 
      : '/node_modules/cordova-plugin-purchase/www/store.js';
    script.onload = () => resolve(window.CdvPurchase);
    document.head.appendChild(script);
  });
}

2. 在组件中初始化使用：

import { useEffect } from 'react';
import { initCdvPurchase } from './utils/cdv-purchase';

function App() {
  useEffect(() => {
    initCdvPurchase().then((CdvPurchase) => {
      // 这里可以安全使用CdvPurchase API
      console.log(CdvPurchase.store);
    });
  }, []);

  return <div>...</div>;
}

3. 同样需配合vite-plugin-static-copy将store.js复制到生产环境的dist/assets目录（同方案1的第一步和配置）。

方案3：直接在index.html中使用环境变量（最简） #

利用Vite支持的EJS语法，在index.html中动态引入脚本：

<head>
  <!-- 其他头部内容 -->
  <script src="<%= import.meta.env.PROD ? '/assets/store.js' : '/node_modules/cordova-plugin-purchase/www/store.js' %>"></script>
</head>

同时用vite-plugin-static-copy将脚本复制到生产环境目录，此方式无需复杂配置，但需手动修改HTML。

内容的提问来源于stack exchange，提问作者Patrick Kenny