電子メール：app.on（ 'ready'）が呼び出されない

Question

私はTypeScriptとwebpackで電子アプリを実行しようとしています。
私はこのmain.tsファイルを持っていて、main.jsファイルをコンパイルしました。

私はmain.jsを編集しましたので、準備ができているかどうかを確認できます。

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'); 

私は./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",を書きました。

私の環境

OS：Macの10.10.5
電子：1.6.11
ノード：v8.2.1
のWebPACK：

3.0.0をお読みいただきありがとうございました。私はどんな助けにも感謝します！

P.S. 私の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$/, 
     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 
    } 
} 

Answer 1

ウェブパックバンドルをエントリポイントで正しく使用しているとは思われません。次の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" 
    ] 
} 

私はそれはまだ動作しますindex.tsに余分なファイルmain.tsとimport "./main.ts"を持つことの余分なステップを行う場合であっても。