当前环境Debian Linux-Deepin

安装Node

直接下载

命令下载

下载

wget https://nodejs.org/dist/v14.15.1/node-v14.15.1-linux-x64.tar.xz

解压,解压后在当前盘多了个文件夹node-v14.15.1-linux-x64.(可自行改名)

sudo tar -zxvf node-v14.15.1-linux-x64.tar.gz

建立软链接

sudo ln -s /盘路径/node-v14.15.1-linux-x64/bin/node /usr/local/bin/
sudo ln -s /盘路径/node-v14.15.1-linux-x64/bin/npm /usr/local/bin/

查看版本

node -v
npm -v

卸载Node

1、卸载npm

sudo npm uninstall npm -g

2、卸载node

sudo apt-get remove nodejs npm -y

3、检查是否还存在

  • 进入/usr/local/lib 删除所有 node 和 node_modules文件夹
  • 进入/usr/local/include 删除所有 node 和 node_modules 文件夹
  • 进入 /usr/local/bin 删除 node 的可执行文件
sudo rm -rf /usr/local/lib/node*
sudo rm -rf /usr/local/include/node*
sudo rm -rf /usr/local/bin/node*
sudo rm -rf /usr/local/node*

设置淘宝镜像源

npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

查看当前镜像源

npm config get registry

安装Electron

采用命令全局安装electron。

npm install electron -g

建立软链接

sudo ln -s /盘路径/node-v14.15.1-linux-x64/bin/electron /usr/local/bin/

查看当前electron版本

electron -v

新建项目

创建一个文件夹surround:

mkdir surround && cd surround

建立一个包文件

npm init -y

生成一个该项目的描述文件package.json

{
"name": "Surround",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

创建脚本文件

建一个main.js文件,并加入如下js内容。

const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})

创建网页

对应于main.js中加载的网页地址,新建一个html页面。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body>
</html>

更改启动脚本

更改新建项目阶段所创建的package.json文件,内容为如下

{
"name": "Surround",
"version": "0.1.0",
"main": "main.js"
}

启动程序

进入到surround文件夹内,按照命令启动程序即可

electron .

或是在package.json中变更为如下脚本

{
"name": "Surround",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}

则可通过如下命令启动程序

npm start

如显示如下错误,不要用sudo打头即可。

Running as root without --no-sandbox is not supported.

安装打包工具

本次使用electron-packager,来完成打包工作,并采用全局安装。

npm install electron-packager -g

建立软链接

sudo ln -s /当前node文件夹路径/node-v14.15.1-linux-x64/bin/electron-packager /usr/local/bin/

安装依赖项

更改package.json文件,增加依赖项,可通过electron -v查看当前electron版本,将依赖项加入到devDependencies节点内。

{
"name": "Surround",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "~11.0.4"
}
}

执行安装依赖模块命令

npm install

当前文件夹下多了node_modules文件夹,存放当前项目依赖的模块,并还多了一个package-lock.json文件,该文件用于锁定当前依赖的模块来源及版本号。

执行打包

在当前文件夹内,采用全局命令打包形式,依照如下命令打包。

electron-packager . 'Surround' --platform=linux --arch=x64 --out=./out --app-version=0.1.0

脚本格式对照(仅限如上使用到的)

electron-packager
<location of project> 项目位置 . 代表当前文件夹下
<name of project> 打包项目名称
<platform> 目标运行平台
<architecture> 底层架构类型
<optional options> 可选配置

或者将命令写入package.json中,执行npm run-script package

{
"name": "Surround",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager . 'Surround' --platform=linux --arch=x64 --out=./out --app-version=0.1.0"
},
"devDependencies": {
"electron": "~11.0.4"
}
}

再执行如下命令打包

npm run-script package

最终都会在当前文件夹内多出一个out文件夹,其中放置着打包好了的程序。

内部详细文件为应用具体文件

如此,完成好了打包的应用程序,直接运行Surround可执行程序是没得问题的。

2020-12-14,望技术有成后能回来看见自己的脚步

Electron安装打包指南的更多相关文章

  1. Electron安装过程深入解析(读完此文解决Electron应用无法启动,无法打包的问题)

    1. 安装Electron依赖包 开发者往往通过npm install(或 yarn add)指令完成为Node.js工程安装依赖包的工作, 安装Electron也不例外,下面是npm和yarn的安装 ...

  2. electron入坑指南

    electron入坑指南 简介 electron 实际集成chrome浏览器和node环境, 运行你写的网页 app 基本目录结构 index.html 名称可以不是index, 这个文件与普通网页的 ...

  3. electron 安装失败解决办法

    1.安装node https://nodejs.org/en/download/2.安装镜像工具npm install -g cnpm --registry=https://registry.npm. ...

  4. electron 安装

    1.从网上下载的是nodejs的v0.10.42版本的安装文件,安装node-v0.10.42-x86.msi都使用默认安装,安装完成后会安装在C:\Program Files\nodejs\目录下, ...

  5. [转载]SharePoint 2013测试环境安装配置指南

    软件版本 Windows Server 2012 标准版 SQL Server 2012 标准版 SharePoint Server 2013 企业版 Office Web Apps 2013 备注: ...

  6. centOS安装Mysql指南

    centOS安装Mysql指南 说明:使用操作系统centOS6.4 32位系统:mysql:mysql-5.7.10-linux-glibc2.5-i686.tar.gz; 一.准备 下载mysql ...

  7. Cadence OrCad Allegro SPB 16.6 下载及安装破解指南

    Cadence公司的电子设计自动化产品涵盖了电子设计的整个流程,包括系统级设计,功能验证,IC综合及布局布线,模拟.混合信号及射频IC设计,全定制集成电路设计,IC物理验证,PCB设计和硬件仿真建模等 ...

  8. 【转】服务器证书安装配置指南(Weblogic)

    服务器证书安装配置指南(Weblogic) 详情请点击: http://verisign.itrus.com.cn/html/fuwuyuzhichi/fuwuqizhengshuanzhuangpe ...

  9. 大数据应用日志采集之Scribe 安装配置指南

    大数据应用日志采集之Scribe 安装配置指南 大数据应用日志采集之Scribe 安装配置指南 1.概述 Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它 ...

随机推荐

  1. HW弹药库之红队作战手册

    红方人员实战手册 声明 Author : By klion Date : 2020.2.15 寄语 : 愿 2020 后面的每一天都能一切安好 分享初衷 一来, 旨在为 "攻击" ...

  2. 前后端分离中,使用swagger2和WireMock提高开发速度

    一.使用swagger2生成接口文档 依赖 <dependency> <groupId>io.springfox</groupId> <artifactId& ...

  3. Ubuntu16.04安装搜狗输入法报错:dkpg:处理归档sogoupinyin.deb(--install)时出错,安装sogoupinyin将破坏fcitx-ui-qimpanel

    系统:ubuntu16.04 事件:安装搜狗拼音时报错 报错信息(ubuntu语言是英文的报错信息): dpkg: regarding sogoupinyin_2.3.2.07_amd64-831.d ...

  4. 【PUPPETEER】初探之获取元素文本值(三)

    一.知识点 page.$eval(selector, pageFunction[, ...args]) page.$$eval(selector, pageFunction[, ...args]) i ...

  5. 理解与使用Treiber Stack

    目录 背景 名称由来 CompletableFuture源码实现 FutureTask实现 Treiber Stack抽象实现 入栈 出栈 示例 参考 背景 最近在很多JDK源码中都看到了Treibe ...

  6. 聊聊 ClassLoader 是如何查找资源的

    ClassLoader作用 classloader这个写业务代码的童鞋们,应该很少用到,但是写框架的应该很熟悉.这个类负责Java底层的类的加载和查找,简单滴说Java 的所有类都是由它负责将clas ...

  7. NOIP2013 解题报告

    TG Day1 T3 货车运输 考虑货车的运输路径,最小边肯定是越大越好. 那就把图的最大生成树拉出来,每一辆货车在上面都有唯一确定的运输路径,否则必然会经过一条更小或相同的边. 然后倍增求路径上的最 ...

  8. EXCEL发送为只读打开

    (1)进入文件夹: C:\Users\xxx\AppData\Roaming\Microsoft\Windows\SendTo (2)新建快捷方式 (3)输入: "C:\Program Fi ...

  9. Java基础教程——Date类和Calendar类

    Date类和Calendar类都是关于日期的类,都在java.util包中,使用时需要import. Date java.util.Date类的对象用来表示时间和日期,用得最多的是获取系统当前日期和时 ...

  10. SQL,T-SQL简介

    SQL:  结构化查询语言(Structured Query Language), 简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理关系型数据库系 ...