前兩天看了一下使用 Electron 開發(fā)應(yīng)用程序，今天說說所怎樣集成 Electron 和 Webpack2 來打包應(yīng)用程序。
安裝依賴庫
這里準(zhǔn)備做個小的演示程序，首先安裝一些這個演示程序需要看的第三方庫
$ npm install --save-dev electron
$ npm install --save-dev electron-packager
$ npm install --save-dev webpack
$ npm install --save-dev webpack-dev-server
$ npm install --save-dev webpack-target-electron-renderer
$ npm install --save-dev is-electron-renderer
$ npm install --save-dev css-loader
$ npm install --save-dev style-loader
$ npm install --save-dev extract-text-webpack-plugin
注：這里使用的webpack是2.5.1版本
工程結(jié)構(gòu)
這個演示程序包含的文件結(jié)構(gòu)如下所示：
myapp
|-- main.js
|-- package.json
|-- src
| |-- index.html
| `-- index.js
`-- webpack.config.js
- main.js - 程序的入口
- package.json - 是node的包說明文件
- src - 目錄下的 index.html 和 index.js 文件是我們的演示頁面內(nèi)容
- webpack.config.js - webpack配置文件
文件說明
package.json
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"electron": "webpack && electron .",
"packager": "webpack && electron-packager . --platform=linux --electron-version=1.6.6 --overwrite"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.1",
"electron": "^1.6.7",
"electron-packager": "^8.7.0",
"extract-text-webpack-plugin": "^2.1.0",
"is-electron-renderer": "^2.0.1",
"style-loader": "^0.17.0",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5",
"webpack-target-electron-renderer": "^0.4.0"
}
}
- 其中 main 定義了 app 的入口
- scripts 中的 electron 定義了一個命令用來使用 webpack 打包并使用 electron 來運行應(yīng)用程序
- scripts 中的 packager 定義了打包程序為一個可執(zhí)行程序。
webpack.config.js
/* eslint strict: 0 */
'use strict';
const path = require('path');
const webpack = require('webpack');
module.exports ={
target: 'electron-renderer',
entry: [
'./src/index',
],
output: {
path: path.join(__dirname, 'build'),
publicPath: path.join(__dirname, 'src'),
filename: 'bundle.js',
},
module: {
rules: []
},
};
- 其中 target 指定為 electron-renderer
main.js
Electron App 的入口 js 文件，啟動一個窗口并加載 src/index.html 文件。
/* eslint strict: 0 */
'use strict';
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('ready', () => {
mainWindow = new BrowserWindow({ width: 1024, height: 768 });
mainWindow.loadURL(`file://${__dirname}/src/index.html`);
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
})
src/index.js
webpack 入口文件，這里僅僅打印當(dāng)前應(yīng)用是否是運行在 electron 中。
console.log('running in electron: ', require('is-electron-renderer'));
src/index.html
測試的 html 文件，其中使用了 webpack 預(yù)編譯好的 bundle.js 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<script src="../build/bundle.js"></script>
<ul>
<li>Node: <script>document.write(process.versions.node)</script></li>
<li>Chrome: <script>document.write(process.versions.chrome)</script></li>
<li>Electron: <script>document.write(process.versions.electron)</script></li>
</ul>
</body>
</html>
測試
-
直接運行 electron 應(yīng)用程序
$ npm run electron這一步會首先運行 “webpack” 來生成 bundle.js 文件，然后再使用 “electron .” 來運行應(yīng)用程序。
-
打包 electron 應(yīng)用程序
$ npm run packager上面程序執(zhí)行后，會在當(dāng)前目錄下生成 myapp-linux-x64 目錄，然后運行 myapp-linux-x64/myapp 即可啟動打包好的可執(zhí)行程序。
