I am trying to run electron app with TypeScript and webpack.
I have this main.ts
file and compiled main.js
file.
I edited main.js
so that i can see if ready is called.
main.ts
import { app, BrowserWindow } from 'electron';
import * as url from 'url';
import * as path from 'path';
let win: Electron.BrowserWindow = null;
console.log('start');
console.log(app.isReady);
app.on('ready', () => {
console.log('ready');
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL(url.format({
pathname: path.join(__dirname, '../', 'no.html'),
protocol: 'file:',
slashes: true,
}));
});
main.js
console.log('main.js -- start');
exports.ids = [3];
exports.modules = {
/***/ 18:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const electron_1 = __webpack_require__(19);
const url = __webpack_require__(20);
const path = __webpack_require__(21);
let win = null;
console.log('before ready');
electron_1.app.on('ready', () => {
console.log('ready');
win = new electron_1.BrowserWindow({ width: 800, height: 600 });
win.loadURL(url.format({
pathname: path.join(__dirname, '../', 'index.html'),
protocol: 'file:',
slashes: true,
}));
});
/***/ }),
/***/ 19:
/***/ (function(module, exports) {
module.exports = require("electron");
/***/ }),
/***/ 20:
/***/ (function(module, exports) {
module.exports = require("url");
/***/ }),
/***/ 21:
/***/ (function(module, exports) {
module.exports = require("path");
/***/ })
};;
console.log('main.js -- finish');
When I run ./node_modules/.bin/electron .
, my console shows
> electron .
main.js -- start
main.js -- finish
And nothing happens. no window will be opened.
Here is my folder structure.
.
├── build
│ ├── index.js
│ └── main.js
├── index.html
├── package.json
├── src
│ ├── index.ts
│ └── main.ts
└── webpack.config.js
Also I wrote "main": "build/main.js",
on my package.son
file.
My environments
OS: Mac 10.10.5
electron: 1.6.11
node: v8.2.1
webpack: 3.0.0
Thank you for reading. I will appreciate any help!!
P.S. Here is my webpack config file.
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
main: './src/main.ts',
index: './src/index.ts',
template: './src/memo.vue',
memo: './src/memo.vue'
},
output: {
path: __dirname + '/build',
filename: '[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
})
],
target: 'electron-main',
resolve: {
extensions: ['.ts', '.vue', '.js'],
modules: ["node_modules"],
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
rules: [
{
test: /\.ts$/,
include: [path.resolve(__dirname, 'src')],
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'ts-loader'
},
{
test: /\.vue$/,
include: [path.resolve(__dirname, 'src')],
exclude: [path.resolve(__dirname, 'node_modules')],
loader: 'vue-loader'
}
,
{
test: /\.ts$/,
include: [path.resolve(__dirname, 'src')],
exclude: [path.resolve(__dirname, 'node_modules')],
enforce: 'pre',
loader: 'tslint-loader',
options: {
fix: true
}
}
]
},
node: {
__dirname: false
}
}
I don't think you're using the webpack bundle properly with its entry point. the following Works For Me™.
webpack.config.js
const path = require('path');
module.exports = {
entry: "./index.ts",
output: {
path: __dirname,
filename: "index.js",
},
module: {
rules: [{
test: /\.ts$/,
exclude: [/node_modules/],
loader: "ts-loader"
}]
},
resolve: {
modules:[
"node_modules"
],
extensions: [".ts", ".js", ".json"]
},
target: "electron-main"
}
index.ts
import * as electron from 'electron';
electron.app.on('ready', function () {
console.log("electron's body is ready... ");
})
package.json
{
"devDependencies": {
"devtron": "^1.4.0",
"ts-loader": "^2.3.2",
"typescript": "^2.4.2",
"webpack": "^3.4.1"
},
"dependencies": {
"electron": "^1.6.11"
},
"scripts": {
"dev": "electron ."
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"moduleResolution": "node",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
Even if I do the extra step of having an extra file main.ts
and import "./main.ts"
in the index.ts
it still works.
I have found that since the ready event only fires once it can be missed. I used the app.whenReady()
to get around that.
https://www.electronjs.org/docs/latest/api/app#appwhenready
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With