含THREEJS、Bootstrap、JQuery的简易Electron应用无法运行

嘿，作为Electron新手，要同时整合这么多库确实容易踩一堆小坑，我先帮你梳理下当前package.json里的问题，再一步步给出可落地的解决方案～

一、先修复你的package.json #

你的package.json里有两个明显的问题：

• three的版本写的是"..."，这会导致npm无法正确安装依赖，得改成具体的稳定版本（比如最新稳定版^0.150.1）
• Bootstrap 4依赖的是popper.js包，不是你写的popper，这个名字错了会导致Bootstrap的弹窗、下拉等组件无法正常工作

下面是修正后的完整package.json：

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^25.8.0", // 建议升级到新稳定版，老版本1.8.4有安全问题且兼容性差
    "electron-packager": "^17.1.2"
  },
  "dependencies": {
    "bootstrap": "^4.6.2", // 选Bootstrap4的最新兼容版
    "jquery": "^3.6.4",
    "popper.js": "^1.16.1",
    "three": "^0.150.1"
  }
}

二、配置Electron主进程（main.js） #

高版本Electron默认禁用了node集成，要在渲染进程里使用本地依赖，需要在main.js里开启相关配置：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 允许渲染进程使用node API
      contextIsolation: false, // Electron 12+必须设置这个，否则无法直接访问require
      enableRemoteModule: true // 如果需要远程调用主进程API可选
    }
  })

  // 加载本地index.html
  mainWindow.loadFile('index.html')
}

// Electron初始化完成后创建窗口
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // macOS下点击dock图标重新创建窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 关闭所有窗口后退出（除了macOS）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

三、在渲染进程中引入所有库（index.html） #

这里提供两种方式，新手推荐第一种CDN方式，避免路径问题；如果要打包应用，选第二种本地依赖方式。

方式1：CDN引入（简单快速，适合测试） #

直接在HTML里引入CDN资源，不用处理本地路径：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Electron Demo</title>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- Bootstrap测试组件 -->
  <div class="container mt-5">
    <h1 class="text-center text-primary">Electron + Three.js + Bootstrap 测试</h1>
    <button type="button" class="btn btn-success mt-3" data-toggle="modal" data-target="#exampleModal">
      点击测试Bootstrap弹窗
    </button>
    <!-- Three.js画布容器 -->
    <div id="three-container" class="mt-4"></div>
  </div>

  <!-- Bootstrap弹窗 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Bootstrap弹窗正常工作！</h5>
          <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>jQuery和Bootstrap集成成功啦🥳</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 按顺序引入：jQuery → Popper.js → Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
  <!-- 引入Three.js -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  <!-- 自定义Three.js脚本 -->
  <script src="./renderer.js"></script>
</body>
</html>

方式2：本地依赖引入（适合打包发布） #

如果要把库打包到应用里，直接引用node_modules里的文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Electron Demo</title>
  <!-- 本地Bootstrap CSS -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- 内容和上面CDN方式一致 -->
  <div class="container mt-5">
    <h1 class="text-center text-primary">Electron + Three.js + Bootstrap 测试</h1>
    <button type="button" class="btn btn-success mt-3" data-toggle="modal" data-target="#exampleModal">
      点击测试Bootstrap弹窗
    </button>
    <div id="three-container" class="mt-4"></div>
  </div>

  <!-- Bootstrap弹窗 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Bootstrap弹窗正常工作！</h5>
          <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>jQuery和Bootstrap集成成功啦🥳</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 本地依赖脚本 -->
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="./node_modules/three/build/three.min.js"></script>
  <script src="./renderer.js"></script>
</body>
</html>

四、写个简单的Three.js测试脚本（renderer.js） #

创建一个旋转立方体，验证Three.js是否正常工作：

// renderer.js
// 初始化Three.js场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 设置渲染器尺寸，添加到页面容器
renderer.setSize(window.innerWidth - 50, 400); // 减去容器padding的宽度
document.getElementById('three-container').appendChild(renderer.domElement);

// 创建一个立方体并添加到场景
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x4CAF50, wireframe: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 调整相机位置
camera.position.z = 5;

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  // 立方体旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 渲染场景
  renderer.render(scene, camera);
}

// 启动动画
animate();

// 窗口大小变化时调整渲染器尺寸
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth - 50, 400);
});

五、运行测试 #

1. 先执行npm install安装所有依赖
2. 执行npm start启动Electron应用
3. 你应该能看到：
   • Bootstrap样式的标题和按钮
   • 点击按钮能弹出Bootstrap模态框
   • 一个绿色的旋转线框立方体

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