| app.js | |
| main.js | |
| typings | |
| node_modules | |
| bundle.js |
| 'use strict'; | |
| import * as os from "os"; | |
| console.log(os.tmpdir()); | |
| <html> | |
| <script src="bundle.js"></script> | |
| <body> | |
| <h1>Minimal Electron test with Typescript and typings</h1> | |
| </body> | |
| </html> |
| 'use strict'; | |
| import {app, BrowserWindow} from 'electron'; | |
| // Keep a global reference of the window object, if you don't, the window will | |
| // be closed automatically when the JavaScript object is garbage collected. | |
| let mainWindow; | |
| function createWindow () { | |
| // Create the browser window. | |
| mainWindow = new BrowserWindow({width: 800, height: 800}); | |
| // and load the index.html of the app. | |
| mainWindow.loadURL('file://' + __dirname + '/index.html'); | |
| // Open the DevTools. | |
| mainWindow.webContents.openDevTools(); | |
| // Emitted when the window is closed. | |
| mainWindow.on('closed', function() { | |
| // Dereference the window object, usually you would store windows | |
| // in an array if your app supports multi windows, this is the time | |
| // when you should delete the corresponding element. | |
| mainWindow = null; | |
| }); | |
| } | |
| app.on('ready', createWindow); |
| { | |
| "name": "minimal_typings_electron", | |
| "version": "1.0.0", | |
| "description": "Here's a minimal TypeScript project using typings to manage 3rd party modules.", | |
| "main": "app.js", | |
| "dependencies": { | |
| "ts-loader": "^0.8.1" | |
| }, | |
| "devDependencies": {}, | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1", | |
| "start": "electron main.js" | |
| }, | |
| "repository": { | |
| "type": "git", | |
| "url": "git+ssh://git@gist.github.com/4288aadea785485486eb617a0a293223.git" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "bugs": { | |
| "url": "https://gist.github.com/4288aadea785485486eb617a0a293223" | |
| }, | |
| "homepage": "https://gist.github.com/4288aadea785485486eb617a0a293223" | |
| } |
| { | |
| "exclude": [ | |
| "typings/browser.d.ts", | |
| "typings/browser", | |
| "node_modules" | |
| ] | |
| } |
| { | |
| "ambientDependencies": { | |
| "github-electron": "registry:dt/github-electron#0.37.4+20160404092711", | |
| "node": "registry:dt/node#4.0.0+20160330064709" | |
| } | |
| } |
| module.exports = { | |
| entry: "./app.ts", | |
| //NB This is important when building stuff that relies on node | |
| //http://stackoverflow.com/questions/31102035/how-can-i-use-webpack-with-express | |
| //target: "node", | |
| resolve: { | |
| extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'] | |
| }, | |
| output: { | |
| path: __dirname, | |
| filename: "bundle.js" | |
| }, | |
| module: { | |
| loaders: [ | |
| { test: /\.css$/, loader: "style!css" }, | |
| { test: /\.ts$/, loader: 'ts-loader' } | |
| ] | |
| }, | |
| // http://stackoverflow.com/questions/34427446/bundle-error-using-webpack-for-electron-application-cannot-resolve-module-elec | |
| // | |
| // Webpack try to resolve electron module with installed node_modules. But | |
| // the electron module is resolved in Electron runtime. So, you have to | |
| // exclude particular module from webpack bundling like this: | |
| externals: [ | |
| (function () { | |
| var IGNORES = ['electron']; | |
| return function (context, request, callback) { | |
| if (IGNORES.indexOf(request) >= 0) { | |
| return callback(null, "require('" + request + "')"); | |
| } | |
| return callback(); | |
| }; | |
| })() | |
| ] | |
| }; |