2018-06-21

2018-6-21-跨平台Electron在Mac上的使用方法

开发环境

此开发环境文档2018-6-20复制于
https://github.com/electron/i18n/blob/master/content/zh-CN/docs/tutorial/development-environment.md#setting-up-macos

你可以使用原生的Node.js开发环境来开发Electron应用。为了打造一个Electron桌面程序的开发环境，你只需要安装好的Node.js、npm、一个顺手的代码编辑器以及对你的操作系统命令行客户端的基本了解。

配置 macOS

Electron 支持 Mac OS X 10.9及其以上版本和macOS所有版本。目前Apple不允许在非Apple电脑上运行macOS虚拟机，所以，如果你需要一台Mac的话，可以考虑租用Mac云服务（比如MacInCloud或者 xcloud）。

首先，安装最新版本的Node.js 。我们推荐您安装最新的 长期支持版本 或者 当前发行版本 。访问Node.js下载页面选择 macOS Installer 。当然，你也可以使用Homebrew安装Node.js，但我们不推荐你这么做，因为许多工具并不兼容Homebrew安装Node.js的方式。

下载完成后，执行安装程序，根据引导完成安装即可。

安装完成后，我们需要来确认Node.js是不是可以正常工作。 Find the macOS Terminal application in your /Applications/Utilities folder (or by searching for the word Terminal in Spotlight). 打开Terminal或其他你喜欢的命令行客户端后，通过以下命令来确认 node 和 npm已经安装成功：

# 下面这行的命令会打印出Node.js的版本信息
node -v

# 下面这行的命令会打印出npm的版本信息
npm -v

如果上述命令均打印出一个版本号，就说明Node.js已经安装好了！然后，你只需要安装一个适合JavaScript开发的代码编辑器就可以开始开发工作了。

配置 Windows

Electron 支持Windows 7 及以上版本-–任何在低版本Windows上开发Electron的尝试都将是徒劳无功的。您可以使用微软向开发者免费提供的Windows 10虚拟机镜像。

首先，安装最新版本的Node.js 。我们推荐您安装最新的 长期支持版本 或者 当前发行版本 。访问Node.js下载页面，选择Windows Installer。下载完成后，执行安装程序，根据引导完成安装即可。

在安装过程中的配置界面, 请勾选Node.js runtime、npm package manager和Add to PATH这三个选项。

安装完成后，我们需要来确认Node.js是不是可以正常工作。 Find the Windows PowerShell by opening the Start Menu and typing PowerShell. 打开PowerShell或其他你喜欢的命令行客户端后，通过以下命令来确认 node 和 npm已经安装成功：

# 下面这行的命令会打印出Node.js的版本信息
node -v

# 下面这行的命令会打印出npm的版本信息
npm -v

如果上述命令均打印出一个版本号，就说明Node.js已经安装好了！然后，你只需要安装一个适合JavaScript开发的代码编辑器就可以开始开发工作了。

配置 Linux

一般来说，Electron支持Ubuntu 12.04、Fedora 21、Debian 8 及其以上版本。

首先，安装最新版本的Node.js 。对于不同linux分支，安装步骤会有所差异。假如你使用系统自带的包管理器，比如： apt 或者 pacman，请使用Node.js 官方Linux安装指引。

作为一个Linux用户，关于命令行的使用就无需我赘述了。打开你喜欢的命令行工具，通过以下命令来确认node 和 npm 在全局可用：

# 下面这行的命令会打印出Node.js的版本信息
node -v

# 下面这行的命令会打印出npm的版本信息
npm -v

Howto

此段来自于 https://github.com/foolsparadise/ElectronDemo
do:

（创建一个空目录，然后在此目录下执行）npm init  
(会有一些提示，跟着做)

then modify package.json file as like this:

{
  "name": "electrondemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "packager": "electron-packager . electrondemo --arm64 --out ./Release --arch=x64 ---app-version=1.0.0 --electron-version=2.0.2"  
  },
  "author": "",
  "license": "MIT"
}

add new file main.js, index.html
do:

npm install  
npm install --save-dev electron (我不知道npm install electron是不是和这条命令同样功能，另，执行可能会自动生成package-lock.json文件和node_modules目录？)  
npm install -g electron-packager (安装打包的，package.json文件会添加一项devDependencies)

add electron-packager scripts in package.json file like this

{  
  "name": "electrondemo",  
  "version": "1.0.0",  
  "description": "",  
  "main": "main.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
    "start": "electron .",  
    "packager": "electron-packager . electrondemo --arm64 --out ./Release --arch=x64 ---app-version=1.0.0 --electron-version=2.0.2",  
    "packageDarwin": "electron-packager . 'electrondemo' --platform=darwin --arch=x64 --icon=electrondemo.icns --out=./Release --asar --app-version=1.0.0 --ignore=\"(dist|Release|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\"",  
    "packageDarwin": "electron-packager . 'electrondemo' --platform=darwin --arch=x64 --icon=electrondemo.icns --out=./Release --asar --app-version=1.0.0",  
    "packageWin": "electron-packager . 'electrondemo' --platform=win32 --arch=x64 --icon=electrondemo.ico --out=./Release --asar --app-version=1.0.0 --ignore=\"(dist|Release|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"",  
    "packageWin": "electron-packager . 'electrondemo' --platform=win32 --arch=x64 --icon=electrondemo.ico --out=./Release --asar --app-version=1.0.0",  
    "packageLinux": "electron-packager . 'electrondemo' --platform=linux --arch=x64 --out=./Release --asar --app-version=1.0.0 --ignore=\"(dist|Release|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"",  
    "packageLinux": "electron-packager . 'electrondemo' --platform=linux --arch=x64 --out=./Release --asar --app-version=1.0.0"  
  },  
  "author": "",  
  "license": "MIT",  
  "devDependencies": {  
    "electron": "^2.0.2"  
  }  
}

Run

npm start

Release

(Mac system)npm run-script packager  
(Mac system)npm run-script packageDarwin  
(Windows system，如果是Mac系统编译则需要先安装wine)npm run-script packageWin  
(Linux system)npm run-script packageLinux