我正在使用Angular 4创建一个Electron应用程序。如何设置它以便它监视任何更改并实时重新加载它。
的package.json
{
"name": "angular-electron",
"version": "0.0.0",
"license": "MIT",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron ."
},
"private": true,
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"angular-svg-round-progressbar": "^1.1.0",
"bulma": "^0.5.3",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.4.1",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"electron": "^1.7.6",
"electron-packager": "^9.1.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
电子
const { app, BrowserWindow } = require('electron')
let win;
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 600,
height: 600,
backgroundColor: '#ffffff',
icon: `file://${__dirname}/dist/assets/logo.png`
})
win.loadURL(`file://${__dirname}/dist/index.html`)
//// uncomment below to open the DevTools.
// win.webContents.openDevTools()
// Event when the window is closed.
win.on('closed', function () {
win = null
})
}
// Create window on electron intialization
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS specific close process
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS specific close process
if (win === null) {
createWindow()
}
})
感谢。
目前,我每次都使用以下命令构建我的应用程序
ng build --prod && electron .
这很累,所以我希望能够构建一个运行命令,以便监视更改和实时重新加载。
答案 0 :(得分:2)
您可以使用electron-reload进行热模块重新加载。它会监听文件更改并重新加载电子应用程序。
只需将其添加到package.json中的devDependencies即可。
然后,你必须将它添加到你的main.ts:
import { app, BrowserWindow, Menu } from 'electron';
let win, serve;
const args = process.argv.slice(1);
serve = args.some(val => val === '--serve');
if (serve) {
require('electron-reload')(__dirname, {});
}
然后将命令添加到包json
"start": "webpack --watch",
"serve": "npm run build:main && electron ./dist --serve",
"build:main": "tsc main.ts --outDir dist && copyfiles package.json dist && cd dist && npm install --prod"
其中build:main
是编译项目的构建脚本。这将编译所有Typescript文件并将它们放入dist文件夹中。然后,它运行npm install
以从NPM下载和安装模块。
您需要使用module-bundler Webpack才能运行它。用
安装npm install --save-dev webpack
首先,在控制台中运行npm start
。然后,在第二个控制台中执行npm run serve
。现在,它会侦听更改并重新编译文件更改。
tsc代表TypeScript编译器。如果您将tsc用作节点模块,请确保已安装:
npm install -g typescript
我目前将它用于具有相同设置(Angular 4,Electron)的项目,并且它运行良好。
答案 1 :(得分:1)
我个人非常讨厌互联网上的所有其他答案。我选择在墙上做更多的事情。我只用原始角度进行所有开发,然后将应用程序中需要电子功能的部分存根,例如共享桌面或从这样的地方获取配置文件:
if (!this.electron.isElectronApp) {
return {
config:data,
more:data,
}
} else {
do electron things
}
到目前为止,它的运行非常出色。如果谁能想到以后如何在屁股上咬我,请分享。
答案 2 :(得分:0)
您可以同时运行电子表和手表。
"electron": "tsc application/start.ts && concurrently \"ng build --watch --base-href ./\" \"devMode=1 electron .\""
还可以使用电子重新加载并将其配置为在更改dist文件夹时重新加载。
require('electron-reload')(__dirname);
由于未生成dist文件夹,因此首次打开电子窗口时会出现错误,一旦ng构建完成,将生成dist,并且electronic-reload将重新加载该应用程序。之后,每次更改dist文件夹都会因为--watch而更改,电子重新加载将重新加载应用程序。
相关的npm软件包
答案 3 :(得分:0)
首先,我们需要了解所问的问题究竟是什么。关于使用具有角度和实时重新加载的电子有两个问题,如下所示:
Build
更改时重新加载 ElectronSource
更改时重新加载 Electron现在,当我在寻找答案时,我实际上是在寻找问题 2,但得到的是问题 1 的答案。我很困惑,没有明确的答案。所以,让我们摆脱这种困惑,我将回答问题 2。
如何在 Source
更改时重新加载 Electron
这很明显,当我们开发 Angular 应用程序时,我们运行 ng serve
命令,TS 编译为 JS 并放入内存并从内存而不是磁盘提供(当我们创建构建).
因此要将 in-memory source
用于 live electron reload
,请执行以下操作:
安装电子重装器:
npm install electron-reloader --save-dev
在 main.js 文件中添加:
require('electron-reload')(__dirname, {
electron: path.join(__dirname, 'node_modules/.bin/electron')
});
使用 ng serve
在一个终端中运行 Angular 应用,您将获得类似 http://localhost:4200 的地址。
并在其他终端运行电子,为此在您的 "electron": "electron ."
脚本文件中添加 package.json
并运行 node electrone
。
现在在 main.js
中以字符串形式提供 mainWindow.loadURL()
中的本地地址。
现在,您的电子应用程序将在您进行更改时重新加载,这将为您提供与在浏览器上运行 Angular 应用程序时相同的重新加载体验。