如何在electron-react-boilerplate中导入CDN下载的资源

核心思路 #

静态import/require会在编译阶段校验文件是否存在，开发环境下资源尚未下载，必然导致编译失败。因此需要改用动态路径获取+Electron API 资源定位的方案，绕过静态编译校验，同时适配开发/生产环境的资源路径差异。

具体步骤 #

1. 确认extraResources配置（补充细节） #

确保package.json的build字段中正确配置extraResources，将assets目录打包到资源目录：

"build": {
  "extraResources": [
    {
      "from": "assets/",
      "to": "assets"
    }
  ]
}

2. 主进程处理资源下载与路径暴露 #

主进程负责检查assets目录的资源是否存在，不存在则从CDN下载，同时给渲染进程提供获取资源目录路径的能力：

const { app, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs-extra');
const axios = require('axios');

// 区分开发/生产环境，获取assets目录绝对路径
function getAssetsPath() {
  if (process.env.NODE_ENV === 'development') {
    // 开发环境直接指向项目根目录的assets
    return path.join(app.getAppPath(), 'assets');
  } else {
    // 生产环境指向打包后的resources/assets目录
    return path.join(process.resourcesPath, 'assets');
  }
}

// 检查并下载资源到assets目录
async function checkAndDownloadResources() {
  const assetsDir = getAssetsPath();
  await fs.ensureDir(assetsDir); // 确保目录存在

  // 示例：下载视频资源
  const cdnUrl = 'https://your-cdn-domain/video.mp4';
  const localPath = path.join(assetsDir, 'video.mp4');

  if (!await fs.pathExists(localPath)) {
    const response = await axios({
      url: cdnUrl,
      method: 'GET',
      responseType: 'stream'
    });
    const writer = fs.createWriteStream(localPath);
    await new Promise((resolve, reject) => {
      writer.on('finish', resolve);
      writer.on('error', reject);
      response.data.pipe(writer);
    });
  }
}

// 应用启动时执行资源检查
app.whenReady().then(async () => {
  await checkAndDownloadResources();
  // 后续创建窗口等逻辑
});

// 给渲染进程暴露获取资源路径的IPC接口
ipcMain.handle('get-assets-path', () => getAssetsPath());

3. 预加载脚本暴露API到渲染进程 #

通过contextBridge将Electron API安全暴露给React渲染进程（避免直接暴露ipcRenderer）：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  getAssetsPath: () => ipcRenderer.invoke('get-assets-path')
});

4. React组件中动态使用资源 #

在React组件中，通过暴露的API获取资源路径，动态设置到元素上。开发环境可直接使用CDN链接，避免本地文件缺失导致的问题：

import { useEffect, useState } from 'react';

function MediaPlayer() {
  const [mediaSrc, setMediaSrc] = useState('');

  useEffect(() => {
    async function loadResource() {
      if (process.env.NODE_ENV === 'development') {
        // 开发环境直接用CDN链接，跳过本地文件校验
        setMediaSrc('https://your-cdn-domain/video.mp4');
      } else {
        const assetsPath = await window.electronAPI.getAssetsPath();
        // 拼接本地资源的file协议路径
        const localSrc = `file://${assetsPath}/video.mp4`;
        setMediaSrc(localSrc);
      }
    }
    loadResource();
  }, []);

  return mediaSrc ? (
    <video src={mediaSrc} controls />
  ) : (
    <div>资源加载中...</div>
  );
}

export default MediaPlayer;

关键注意事项 #

• 绝对不要用静态import/require导入这类动态下载的资源，否则开发环境编译必报错
• 生产环境下，extraResources会被打包到与应用程序同级的resources目录下，需用process.resourcesPath定位
• 开发环境可直接复用CDN链接，既避免本地文件缺失问题，也能快速验证资源效果

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