前言
现在很多平台上的桌面应用，都是直接通过js项目打包的。我在一个项目桌面项目的源码中，找到了一个打包工具，叫做electron。
下面通过实际部署，学习下这个工具的使用。
教程
electron是什么
Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个项目在2014春季开源。
确认当前开发环境
node -v v8.5.0 npm -v 5.8.0
安装你的第一个应用
初始化项目
npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (f) demo1 version: (1.0.0) description: entry point: (index.js) main.js test command: git repository: keywords: author: license: (ISC) About to write to /xiaoyu/web打包/f/package.json: { "name": "demo1", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
修改文件
{ "name": "demo1", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
安装electron
npm install --save-dev electron
创建main.js
const electron = require('electron') // Module to control application life. const app = electron.app // Module to create native browser window. const BrowserWindow = electron.BrowserWindow const path = require('path') const url = require('url') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let mainWindow function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // Open the DevTools. // mainWindow.webContents.openDevTools() // Emitted when the window is closed. mainWindow.on('closed', function () { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. mainWindow = null }) } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow) // Quit when all windows are closed. app.on('window-all-closed', function () { // On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { // On OS X it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (mainWindow === null) { createWindow() } })
创建index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <!-- All of the Node.js APIs are available in this renderer process. --> We are using Node.js <script>document.write(process.versions.node)</script>, Chromium <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. <script> </script> </body> </html>
运行项目
npm start > demo1@1.0.0 start /xiaoyu//f > electron .
这时候会强制打开窗口，展示为定义的网页内容。
网络异常，图片无法展示
|
打包
安装打包工具
npm install electron-packager --save-dev npm WARN demo1@1.0.0 No description npm WARN demo1@1.0.0 No repository field. + electron-packager@12.0.1 added 75 packages from 50 contributors in 11.562s
修改package.json文件，我的环境是MacOS,在scripts里增加下面的内容。
"package": "electron-packager . 'Hosts' --platform=darwin --arch=x64 --out=./dist --asar --app-version=1.0.0"
运行命名，就能打包了。
npm run-script package > demo1@1.0.0 package /xiaoyu/web打包/f > electron-packager . 'Hosts' --platform=darwin --arch=x64 --out=./dist --asar --app-version=1.0.0 Packaging app for platform darwin x64 using electron v1.8.4 Wrote new app to dist/Hosts-darwin-x64
然后在项目的根目录的dist文件夹中找到安装文件。
网络异常，图片无法展示
|
到此，简单的打包工作就完成了~
