Modify electron-quick-start to use es6 and debug it in VSCode

Author: octref

electron-quick-start-es6/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

electron-quick-start-es6/.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "program": "${workspaceRoot}/main.js"
+    },
+    {
+      "name": "Debug Renderer Process",
+      "type": "chrome",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "runtimeArgs": [
+        "http://localhost:4000",
+        "--remote-debugging-port=9222"
+      ],
+      "sourceMaps": true,
+      "webRoot": "${workspaceRoot}"
+    }
+  ]
+}

electron-quick-start-es6/helper.js

@@ -0,0 +1,3 @@
+export function sayHello(target) {
+  console.log(`hello ${target}!`)
+}

electron-quick-start-es6/index.html

@@ -12,8 +12,5 @@ <h1>Hello World!</h1>
     and Electron <script>document.write(process.versions.electron)</script>.
   </body>
 
-  <script>
-    // You can also require other files to run in this process
-    require('./renderer.js')
-  </script>
+  <script src="/dev-dist/renderer.js"></script>
 </html>

electron-quick-start-es6/main.js

@@ -13,10 +13,10 @@ function createWindow () {
   mainWindow = new BrowserWindow({width: 800, height: 600})
 
   // and load the index.html of the app.
-  mainWindow.loadURL(`file://${__dirname}/index.html`)
+  mainWindow.loadURL('http://localhost:4000')
 
   // Open the DevTools.
-  mainWindow.webContents.openDevTools()
+  // mainWindow.webContents.openDevTools()
 
   // Emitted when the window is closed.
   mainWindow.on('closed', function () {

electron-quick-start-es6/package.json

@@ -4,7 +4,8 @@
   "description": "A minimal Electron application",
   "main": "main.js",
   "scripts": {
-    "start": "electron ."
+    "start": "electron .",
+    "dev": "webpack-dev-server --no-info --quiet --port 4000 --config webpack.config.js"
   },
   "repository": {
     "type": "git",
@@ -23,6 +24,11 @@
   },
   "homepage": "https://github.com/electron/electron-quick-start#readme",
   "devDependencies": {
-    "electron": "^1.3.4"
+    "babel-core": "^6.14.0",
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.14.0",
+    "electron": "^1.3.5",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.1"
   }
 }

electron-quick-start-es6/renderer.js

@@ -1,3 +1,11 @@
 // This file is required by the index.html file and will
 // be executed in the renderer process for that window.
 // All of the Node.js APIs are available in this process.
+
+import { sayHello } from './helper.js';
+
+sayHello('world')
+
+document.body.addEventListener('click', () => {
+  sayHello('vscode')
+})

electron-quick-start-es6/webpack.config.js

@@ -0,0 +1,20 @@
+const webpack = require('webpack')
+
+module.exports = {
+  entry: './renderer.js',
+  output: {
+    path: './dist',
+    publicPath: '/dev-dist',
+    filename: 'renderer.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  devtool: 'eval-source-map'
+}