我正在尝试使用TypeScript和webpack运行电子应用程序.
我有这个main.ts文件和编译的main.js文件.
我编辑了main.js,以便我可以看到是否已调用ready.
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'),}));
});
/***/ }),/***/ 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');
当我运行./node_modules/.bin/electron.,我的控制台显示
> electron .
main.js -- start
main.js -- finish
没有任何反应.没有窗户会被打开.
这是我的文件夹结构.
.
├── build
│ ├── index.js
│ └── main.js
├── index.html
├── package.json
├── src
│ ├── index.ts
│ └── main.ts
└── webpack.config.js
我还在package.son文件中写了“main”:“build / main.js”.
我的环境
操作系统:Mac 10.10.5
电子:1.6.11
node:v8.2.1
webpack:3.0.0
谢谢你的阅读.我将不胜感激!
附:
这是我的webpack配置文件.
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$/,loader: 'vue-loader'
},{
test: /\.ts$/,enforce: 'pre',loader: 'tslint-loader',options: {
fix: true
}
}
]
},node: {
__dirname: false
}
}
最佳答案
我不认为你正在使用webpack包及其入口点.以下Works For Me™.
原文链接:https://www.f2er.com/js/429186.htmlwebpack.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"
]
}
即使我执行额外的步骤,在index.ts中有一个额外的文件main.ts并导入“./main.ts”,它仍然有效.