创建electron,解决包清理的问题,解决镜像源卡住下载时间长

㱘郳

已于 2025-02-06 12:07:58 修改

阅读量811

点赞数 5

文章标签： electron javascript

于 2024-04-27 10:55:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59779173/article/details/138244395

版权

本文介绍了如何在Windows系统中设置Node.js路径、使用npm配置、创建并管理electron项目，包括package.json文件的创建、npmrc文件的使用以及解决npm镜像问题。还提到需要管理员权限运行某些命令和清理npm缓存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的电脑用户名是Anyphasy,我的node.js安装在D:\developp\nodejss18.18.0

使用npm config get prefix查看node.js安装路径

npm config get prefix

创建electron

创建package.json文件,它里面记载了你的electron版本,项目描述,以及启动命令等信息

npm init -y

先查看你自己的npmrc配置

列出镜像源列表,实际上在‪C:\Users\Anyphasy\.npmrc文件, 我的电脑用户名是Anyphasy

npm config list

如果你一开始输入命令下载,--save-dev是使其只在开发环境下安装依赖,发布是不安装依赖

npm install electron --save-dev

缺少重要语句

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

如果你在命令行键入

npm config set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

不行,大多数帖子都是这么教的,这不对

‪直接找C盘C:\Users\Anyphasy\.npmrc文件

再输入:

npm config list

继续执行下载electron

npm install electron --save-dev

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>你好啊</h1>
</body>
</html>

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

const createWindow = () => {
    const win = new BrowserWindow(
        {
            width: 1280,
            height: 720
        }
    )

    //直接加载刚才的html文件
    win.loadFile('index.html')

}

app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        // 在 macOS 系统内, 如果没有已开启的应用窗口
        // 点击托盘图标时通常会重新创建一个新窗口
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })

}

)
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') { app.quit() }
})

electron运行成功

刚才的.npmrc文件的链接网站源地址为

CNPM Binaries Mirror

里面除了electron也有其他的node模块供下载

清理nodejs缓存

找到npm存储的缓存路径,我是没有看到electron的缓存

npm config get cache

这时可以使用

npm cache clean --force

此命令会清除 npm 的缓存。与 npm cache verify 不同，clean 命令会删除所有缓存，而不仅仅是验证和清理无效的缓存,比 npm cache verify更彻底清除

如果不想缓存总是下载到C盘怎么办?

先说结论,解决方法有,但会导致不方便

可以在npmrc文件下修改cache文件，指定你在D盘nodejs的目录，但是,通常你在VS code中打开的时候，不是以管理员身份运行的vscode，如果修改cache到D盘,会导致下包的时候可能出现权限不够的错误，因为你已经把cache的路径设置为D盘，解决方法也有,把VScode设置属性,每次打开的时候使用管理员身份运行，但, 这又会导致平时复制文件的时候直接拖拽到VScode里面会导致无法拖拽的情况，我个人是不建议，我是宁愿你频繁使用命令行清理C盘的缓存

手动清除