vscode+electron开发环境搭建

fengyupaoyao

已于 2022-01-24 17:25:35 修改

阅读量3.6k

点赞数 1

分类专栏：前端文章标签： vscode electron ide

于 2022-01-12 19:47:47 首次发布

本文链接：https://blog.youkuaiyun.com/fengyupaoyao/article/details/122460682

版权

前端专栏收录该内容

3 篇文章

订阅专栏

安装nodejs

https://nodejs.org/en/download/releases/

国外的连接速度慢或者连接不稳定，可以访问阿里镜像Node.js Mirror (taobao.org)

Node.js Mirror (taobao.org)

有历史版本，我选择的是node-v12.15.0-x64.msi，安装到c:\debug\nodejs目录

进入nodejs安装目录，>node -v及>npm -v若显示版本号则表示安装成功

之后的步骤具体参考https://blog.youkuaiyun.com/qq_40421671/article/details/113322614

用vscode打开一个文件夹，在vscode的terminal中输入>npm init -y，可会生成一个package.json文件

设置淘宝镜像

>npm install cnpm -g --registry=https://registry.npm.taobao.org

安装electron依赖包

cnpm install electron --save-dev

bug 1:

若提示cnpm 不是内部命令，

solution:

进入C:\Debug\nodejs\node_global中运行>cnpm -v，若成功，需要设置下PATH环境变量，增加C:\Debug\nodejs\node_global;即可。

bug 2:

在cmd中正常，但在vscode的terminal中提示“无法加载文件cnpm.ps1，因为在此系统上禁止运行脚本"

solution:

在powershell中执行Start-Process powershell -Verb runAs

会提示授权，并以管理员身份运行powershell

继续重新执行set-ExecutionPolicy RemoteSigned 选择 Y

继续尝试安装electron依赖包

>cnpm install electron --save-dev

完成后，查当前Electron版本 >npx electron -v

或者>.\node_modules\.bin\electron -v

若显示版本号表明安装成功

>.\node_modules\.bin\electron

打开electron 查看帮助等

===vscode第一次运行electron项目=============

前提：已安装node.js、VSCode、electron依赖包
安装module依赖包
cnpm install update-electron-app
cnpm install app
cnpm install browser-window

-------在VSCode中配置electron调试---------------------------

在VSCode中配置electron调试参考以下链接： Electron开发桌面应用(2)：VSCODE调试Electron项目_ruyulin的博客-优快云博客_vscode调试electron

----Bug1: 报错：Cannot use import statement outside a module
在import { app, BrowserWindow, protocol, shell } from "electron"行
解决办法： 在package.json中加配置项： "type": "module",

=======main.js开头要这样写才行，才能解决 core.require is not a function 问题==========

// var app = require('app'); // 控制应用生命周期的模块。

// var BrowserWindow = require('browser-window'); // 创建原生浏览器窗口的模块

// var { app, BrowserWindow } = require('electron')

var electron = require('electron')

var app = electron.app

var BrowserWindow = electron.BrowserWindow

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，

// window 会被自动地关闭

var mainWindow = null;

=====启用remote主进程和渲染进程之间调用

1. remote在electron12的时候废弃了remote模块，所以需要我们自己安装remote包。

 npm install @electron/remote --save

2. 在主进程中进行初始化：

require("@electron/remote/main").initialize();

 require("@electron/remote/main").enable(mainWindow.webContents);

3. 并在主进程webPreferences中设置enableRemoteModule和contextIsolation：

webPreferences: {

    nodeIntegration: true,

    contextIsolation: false,

    enableRemoteModule: true, // 使用remote模块

 },