Electron installation, debugging, packaging specific use

wants to quickly understand Electron, debug electron, package electron, recommend item Electron-WebPack-Quick-Start

Quick start

First install Cross-ENV

for setting environment variables. Because installing electron, you need to download, the default source is very slow in domestic download, you need to switch the download address
   #, for use in China. 
# Install CROSS-ENV for NPM install cross-env -g

clone project to the local

#clone repositorygit clone https, local
   
#clone repositorygit clone https : //github.com/electron-userland/electron-webpack-quick-start.git

   
Installing items dependencies

 Cross-env electron_mirror = " https://npm.taobao.org/mirrors/electron/ "NPM Install   
Comparison Electron 7.0.0
, why not set

npm_config_electron_custOM_DIR Environment variable. The ELECTRON version used by the project is 5.0.6 , so environment variables use only set Electron_Mirror . You can see index.js file under Electron-Download file, only the default URL is added V , set Electron_Mirror URL will not take v Get BaseURL () {ix (this.version.indexof ( ‘nightly’)! == -1) {return process.env.NPM_CONFIG_ELECTRON_NIGHTLY_MIRROR || process.env.npm_config_electron_nightly_mirror || process.env.npm_package_config_electron_nightly_mirror || process.env.ELECTRON_NIGHTLY_MIRROR || this.opts.nightly_mirror || ‘https : //github.com/electron/nightlies/releases/download/v ‘} return process.env.NPM_CONFIG_ELECTRON_MIRROR || process.env.npm_config_electron_mirror || process.env.npm_package_config_electron_mirRor || Process.Env.ectron_mirror || this.opts.mirror || ‘https://github.com/electrom/electron/releases/download/v’}

   

NPM Run DEV

   Experience compilation 
input command

electron 安装,调试,打包的具体使用

npm Run Compile

Experience package
  I think Packaged into an exemption  exe 
, so I added it in package.json
file:

electron 安装,调试,打包的具体使用 “Build” : {“ProductName”: “HelloWord”, “AppID”: “Scripter.Helloword”, “WIN”: {“Target”: [“portable”]}, “portable”: {“artifactName”: “helloword.exe”: “HelloWord.exe” }}

The entire package.json

is as follows:

{“NAMe “:” Electron-Webpack-Quick-Start “,” Version “:” 0.0.0 “,” license “:” mit “,” scripts “: {” dev “:” electron-webpack devack devack, “compile” : “Electron-Webpack”, “Dist”: “Yarn Compile && Electron-Builder”, “Dist: DIR”: “Yarn dist –d –dir -c.compression = store -c.mac.Identity = null”}, ” Dependencies “: {” Source-map-support “:” ^ 0.5.12 “},” devdependencies “: {” electron “:” 5.0.6 “,” electron-builder “:” ^ 21.0.11 “,” Electron -webpack “:” ^ 2.7.4 “,” Webpack “:” ~ 4.35.3 “},” build “: {” ProductName “:” HelloWord “,” AppID “:” scripter.helloword “,” WIN “: {“Target”: [“portable”]}, “portable”: {“artifactName”: “helloword.exe”}}}

  Enter command 

This step is slow, because to download, the first time map:

 The second operation, it is much more, but  building  here is a bit slow, the second operation picture: 

Generate free installation

EXE
See the figure below, you want to use it for others, just copy this. I run, the start speed is slow, spent 11 seconds.
  Program operational renderings  
The experience is completed, you can start learning Electron.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

electron 安装,调试,打包的具体使用

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment