• ArthurSlog

  • SLog-80

  • 1 Year,

  • Through China,

  • September 21th 2018

Scan the QR code on wechat and follow my official account

  • ArthurSlog.com

  • MSDN: ArthurSlog

  • GitHub: BlessedChild

  • NPMJS.com: arthurslog

  • The nuggets home page

  • Jane books home page

  • segmentfault

I know that whatever choice lies ahead is the only sure answer for me

Development environment MacOS(High Sierra 10.13.6 (17G65))

Required information and information sources:

  • electron-installer-dmg

Start coding

  • This time, package the ArthurSlogMarkdownEditor executable into a DMG (MacOS platform) installation package

  • The tool we need to use here is the electron- Installer-DMG

  • So, NPM goes (recently I saw someone teasing that front-end development only needs two steps: 1. NPM I; 2. NPM run build

  • Switch to the project path

cd ~/Desktop/ArthurSlogMarkdownEditor/

sudo npm install electron-installer-dmg –save-dev –unsafe-perm=true

sudo npm install electron-installer-dmg -g –unsafe-perm=true

  • Warnings and errors (such as node-gyp compilation failure) may occur during the following process.

  • According to the node – gyp introduction: https://github.com/nodejs/node-gyp

  • Unknown:

On macOS
python (v2.7 recommended, v3.x.x is not supported) (already installed on macOS)
Xcode
You also need to install the Command Line Tools via Xcode. You can find this under the menu Xcode -> Preferences -> Locations (or by running xcode-select --install in your Terminal)
This step will install gcc and the related toolchain containing make
Copy the code

  • Locations -> Preferences -> Command Line Tools -> Xcode10.0(10A255)

  • Then re-execute

sudo npm install electron-installer-dmg –save-dev –unsafe-perm=true

sudo npm install electron-installer-dmg -g –unsafe-perm=true

  • After a successful installation, update the package.json file:

~/Desktop/ArthurSlogMarkdownEditor/package.json

{
  "name": "ArthurSlogBrowser_Nodejs"."productName": "ArthurSlogMarkdownEditor"."version": "0.1.0 from"."description": "This is a Browser by Nodejs"."private": "true"."main": "main.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "electron ."."package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/ICON.png.icns --prune=true --out=release-builds"."package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/ICON.png.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"ArthurSlogMarkdownEditor\""."package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/linux/ICON.png --prune=true --out=release-builds"."create-installer-mac": "electron-installer-dmg ./release-builds/ArthurSlogMarkdownEditor-darwin-x64/ArthurSlogMarkdownEditor.app ArthurSlogMarkdownEditor --out=release-builds --overwrite --icon=assets/icons/mac/ICON.png.icns"
  },
  "keywords": []."author": "ArthurSlog"."license": "ISC"."devDependencies": {
    "electron": "^ 2.0.9"."electron-installer-dmg": "^ 2.0.0." "."electron-packager": "^ 12.1.2." "
  },
  "dependencies": {
    "markdown-it": "^ 8.4.2"}}Copy the code
  • A new build directive has been added:

~/Desktop/ArthurSlogMarkdownEditor/package.json

"create-installer-mac": "electron-installer-dmg ./release-builds/ArthurSlogMarkdownEditor-darwin-x64/ArthurSlogMarkdownEditor.app ArthurSlogMarkdownEditor --out=release-builds --overwrite --icon=assets/icons/mac/ICON.png.icns"
Copy the code
  • Ok, now execute the command

sudo npm run package-mac

sudo npm run create-installer-mac

  • After successful build, can release the path – builds next generation ArthurSlogMarkdownEditor. DMG file

  • Double-click the ArthurSlogMarkdownEditor. DMG file, install, drag ArthurSlogMarkdownEditor pull to the folder

  • Click “Launch Platform” on Docker and you’ll see That ArthurSlogMarkdownEditor has been successfully installed

  • Click to open ArthurSlogMarkdownEditor and test it. Everything works

  • At this point, ArthurSlogMarkdownEditor is packaged to the MAC platform DMG installation package.

Please follow my wechat account ArthurSlog

Scan the QR code on wechat and follow my official account

If you like my article, please like it and leave a comment

thank you