electron video.js

Question

electron 正常访问video.js
electron-builder 打包后访问video.js 报错Cannot find module 'global/window'
electron-packager 打包后访问video.js 报错Cannot find module 'video.js'
是什么问题？

Answer 1

引自免费微信小程序：皆我百晓生

在 Electron 应用程序中使用 video.js，并且在打包时遇到模块找不到的问题，通常是由于依赖关系处理不当导致的。当您在开发环境中运行 Electron 项目时，Node.js 的 global 对象是可用的，但在构建后的应用中（例如 electron-builder 或 electron-packager 打包），这个对象可能不存在，因为它们通常会将应用编译为浏览器环境。

要解决这个问题，您可以尝试以下步骤：

1. 使用 Browserify 或 Webpack： Electron 开发中推荐使用 Browserify 或 Webpack 来处理模块打包和依赖关系。这可以帮助您正确地处理像 window 这样的全局变量。如果您还没有使用这些工具，请安装并配置它们。

2. 使用 ES6 模块： 将您的代码迁移到 ES6 模块，这样可以更好地管理依赖关系。在 Electron 中，您可以使用 require('es6-module-loader') 或者使用 Babel 将 ES6 模块转换为 CommonJS 模块。

3. 处理 window 对象： 在 Electron 中，您可以使用 win.webContents.on('did-finish-load', () => { ... }) 来确保在执行任何与 window 相关的操作之前页面已经完全加载。

4. 使用 electron-rebuild： 如果您使用了第三方库，确保在安装新依赖或更改构建设置后使用 electron-rebuild 来重新编译那些需要原生模块的库。

5. 修改 package.json： 在 package.json 文件中添加以下字段，告诉 Electron 使用 ESM 模块：

   "type": "module"
   

6. 修复 video.js 的导入方式： 尝试将视频播放器的导入方式更改为：

   import * as videojs from 'video.js/dist/video-js.min.js';
   

7. 使用 electron-builder 配置： 如果您使用 electron-builder，确保在 package.json 中有正确的配置，例如：

   "build": {
     "asarUnpack": ["node_modules/video.js"],
     "extraResource": ["node_modules/video.js"]
   }
   

8. 使用 electron-packager 配置： 对于 electron-packager，确保包含 node_modules，在命令行中指定：

   electron-packager . --all-platforms --out=release-builds --asar-unpack=node_modules/video.js
   

遵循以上步骤应该能解决您在打包后的应用程序中遇到的问题。如果还有问题，请检查您的构建过程，确保所有依赖项都已正确处理。