javascript – 电子:app.on(‘ready’)永远不会被调用

前端之家收集整理的这篇文章主要介绍了javascript – 电子:app.on(‘ready’)永远不会被调用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试使用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™.

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"
  ]
}

enter image description here

即使我执行额外的步骤,在index.ts中有一个额外的文件main.ts并导入“./main.ts”,它仍然有效.

原文链接:https://www.f2er.com/js/429186.html

猜你在找的JavaScript相关文章