Electron创建应用以及打包exe

一、Electron官网文档，根据文档步骤创建应用

http://www.electronjs.org/docs/tutorial/quick-start#application-architecture

执行npm i --save-dev electron可能会报错，如图：

image.png

可以给electron设置淘宝镜像，
添加.npmrc文件，内容ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/。如图：

image.png

再执行npm i --save-dev electron就不会报错了。

创建应用之后执行npm start就可以在本地运行应用。

二、使用electron-packager打包成exe

全局安装打包神器electron-packager

npm install electron-packager -g

在命令中设置参数打包
执行命令electron-packager --help或者访问官网查看所有可配置参数。
基本命令：

electron-packager   --platform= --arch= [optional flags...]

命令说明：

• sourcedir：项目源文件所在路径（唯一的必须参数）
• appname：项目名称（直接使用package.json文件中的name属性更方便）
• platform：要构建哪个平台的应用（Windows、Mac 还是 Linux）
• arch：决定了使用 x86 （ia32）还是 x64（x64），还是两个架构都用
• optional options：可选选项
  一个命令举例：
  electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules
  说明：
  electron-packager . 应用名称 --out 输出文件夹 --arch=x64 --overwrite --ignore=node_modules

在package.json文件中配置参数打包

命令较长，每次打包都需要输入很麻烦，可以把命令配置到package.json文件中scripts属性中：

 "scripts": {
    "start": "electron .",
    "package":"electron-packager . test1 --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"
  },

然后便可运行命令npm run packager进行打包：

image.png

打包成功，生成out文件夹找到test1.exe，点击即可运行应用

image.png

image.png