Ionic3 与Electron制作桌面应用

"name": "ion-electron",
"author": {
"name": "Damodar Lohani",
"email": "example@example.com",
"url": "https://lohanitech.com/members/damodar-lohani"
},
"description": "ionic framework based electron project",
"main": "electron/electron.js",
"config": {
"ionic_bundler": "webpack",
"ionic_webpack": "./config/webpack.config.js"
},
"build": {
"appId": "com.lohanitech.ionic-electron-test",
"electronVersion": "1.7.5",
"asar":false,
"files": [
"www/**/*",
"electron/*"
]
}

externals: [

(function () {

var IGNORES = ["fs","child_process","electron","path","assert","cluster","crypto","dns","domain","events","http","https","net","os","process","punycode","querystring","readline","repl","stream","string_decoder","tls","tty","dgram","url","util","v8","vm","zlib"];

return function (context, request, callback) {

if (IGNORES.indexOf(request) >= 0) {

return callback(null, "require('" + request + "')");

}

return callback();

};

})()

],

/*

* The webpack config exports an object that has a valid webpack configuration

* For each environment name. By default, there are two Ionic environments:

* "dev" and "prod". As such, the webpack.config.js exports a dictionary object

* with "keys" for "dev" and "prod", where the value is a valid webpack configuration

* For details on configuring webpack, see their documentation here

* https://webpack.js.org/configuration/ 
*/
var path = require('path');

var webpack = require('webpack');

var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
var ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');

var PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
var optimizedProdLoaders = [

{

test: /\.json$/,

loader: 'json-loader'

},

{

test: /\.js$/,

loader: [

{

loader: process.env.IONIC_CACHE_LOADER

},
{

loader: '@angular-devkit/build-optimizer/webpack-loader',

options: {

sourceMap: true

}

},

]

},

{

test: /\.ts$/,

loader: [

{

loader: process.env.IONIC_CACHE_LOADER

},
{

loader: '@angular-devkit/build-optimizer/webpack-loader',

options: {

sourceMap: true

}

},
{

loader: process.env.IONIC_WEBPACK_LOADER

}

]

}

];
function getProdLoaders() {

if (process.env.IONIC_OPTIMIZE_JS === 'true') {

return optimizedProdLoaders;

}

return devConfig.module.loaders;

}
var devConfig = {

entry: process.env.IONIC_APP_ENTRY_POINT,

output: {

path: '{{BUILD}}',

publicPath: 'build/',

filename: '[name].js',

devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),

},

externals: [

(function () {

var IGNORES = ["fs","child_process","electron","path","assert","cluster","crypto","dns","domain","events","http","https","net","os","process","punycode","querystring","readline","repl","stream","string_decoder","tls","tty","dgram","url","util","v8","vm","zlib"];

return function (context, request, callback) {

if (IGNORES.indexOf(request) >= 0) {

return callback(null, "require('" + request + "')");

}

return callback();

};

})()

],

devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {

extensions: ['.ts', '.js', '.json'],

modules: [path.resolve('node_modules')]

},
module: {

loaders: [

{

test: /\.json$/,

loader: 'json-loader'

},

{

test: /\.ts$/,

loader: process.env.IONIC_WEBPACK_LOADER

}

]

},
plugins: [

ionicWebpackFactory.getIonicEnvironmentPlugin(),

ionicWebpackFactory.getCommonChunksPlugin()

],
// Some libraries import Node modules but don't use them in the browser.

// Tell Webpack to provide empty mocks for them so importing them works.

node: {

fs: 'empty',

net: 'empty',

tls: 'empty'

}

};
var prodConfig = {

entry: process.env.IONIC_APP_ENTRY_POINT,

output: {

path: '{{BUILD}}',

publicPath: 'build/',

filename: '[name].js',

devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),

},

externals: [

(function () {

var IGNORES = ["fs","child_process","electron","path","assert","cluster","crypto","dns","domain","events","http","https","net","os","process","punycode","querystring","readline","repl","stream","string_decoder","tls","tty","dgram","url","util","v8","vm","zlib"];

return function (context, request, callback) {

if (IGNORES.indexOf(request) >= 0) {

return callback(null, "require('" + request + "')");

}

return callback();

};

})()

],

devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {

extensions: ['.ts', '.js', '.json'],

modules: [path.resolve('node_modules')]

},
module: {

loaders: getProdLoaders()

},
plugins: [

ionicWebpackFactory.getIonicEnvironmentPlugin(),

ionicWebpackFactory.getCommonChunksPlugin(),

new ModuleConcatPlugin(),

new PurifyPlugin()

],
// Some libraries import Node modules but don't use them in the browser.

// Tell Webpack to provide empty mocks for them so importing them works.

node: {

fs: 'empty',

net: 'empty',

tls: 'empty'

}

};
module.exports = {

dev: devConfig,

prod: prodConfig

}

'use strict';

const electron = require('electron');

// Module to control application life.

const {

app } = electron;

// Module to create native browser window.

const {

BrowserWindow

} = electron;
let win;
function createWindow() {

// Create the browser window.

win = new BrowserWindow({

width: 1024,

height: 600

});
var url = 'file://' + __dirname + '/../www/index.html';

var Args = process.argv.slice(2);

Args.forEach(function (val) {

if (val === "test") {

url = 'http://localhost:8100'

}

});
// and load the index.html of the app.

win.loadURL(url);
// Open the DevTools.

win.webContents.openDevTools();
// Emitted when the window is closed.

win.on('closed', () => {

// 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.

win = 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', () => {

// 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', () => {

// 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 (win === null) {

createWindow();

}

});

"scripts": {

"dev": "nf start",

"start":"ionic-app-scripts serve",

"electron dist": "electron .",

"ebuild":"npm run build && node_modules/.bin/build",

"clean": "ionic-app-scripts clean",

"build": "ionic-app-scripts build",

"ionic:build": "ionic-app-scripts build",

"ionic:serve": "ionic-app-scripts serve"

}

ionic: npm start

electron: node electron-wait-ionic.js

const net = require('net');

const port = 8100;
process.env.E_URL = `http://localhost:${port}`;
const client = new net.Socket();
let startedElectron = false;

const tryConnection = () => client.connect({port: port}, () => {

client.end();

if(!startedElectron) {

console.log('starting electron');

startedElectron = true;

const exec = require('child_process').exec;

exec('electron .');

}

}

);
tryConnection();
client.on('error', (error) => {

setTimeout(tryConnection, 1000);

});