Use Babel in main process with Webpack build

.eslintignore

@@ -0,0 +1 @@
+main.js

.gitignore

@@ -32,3 +32,5 @@ node_modules
 # App packaged
 dist
 release
+main.js
+main.js.map

main.js → main.development.js

@@ -1,19 +1,9 @@
-/* eslint strict: 0 */
-'use strict';
+import { app, BrowserWindow, Menu, crashReporter, shell } from 'electron';
 
-process.env.NODE_ENV = process.env.NODE_ENV || 'production';
-
-const electron = require('electron');
-const app = electron.app;
-const BrowserWindow = electron.BrowserWindow;
-const Menu = electron.Menu;
-const crashReporter = electron.crashReporter;
-const shell = electron.shell;
 let menu;
 let template;
 let mainWindow = null;
 
-
 crashReporter.start();
 
 if (process.env.NODE_ENV === 'development') {

package.js

@@ -1,14 +1,17 @@
 /* eslint strict: 0, no-shadow: 0, no-unused-vars: 0, no-console: 0 */
 'use strict';
 
+require('babel-polyfill');
 const os = require('os');
 const webpack = require('webpack');
+const electronCfg = require('./webpack.config.electron.js');
 const cfg = require('./webpack.config.production.js');
 const packager = require('electron-packager');
 const del = require('del');
 const exec = require('child_process').exec;
 const argv = require('minimist')(process.argv.slice(2));
 const pkg = require('./package.json');
+const deps = Object.keys(pkg.dependencies);
 const devDeps = Object.keys(pkg.devDependencies);
 
 const appName = argv.name || argv.n || pkg.productName;
@@ -23,8 +26,13 @@ const DEFAULT_OPTS = {
   ignore: [
     '/test($|/)',
     '/tools($|/)',
-    '/release($|/)'
+    '/release($|/)',
+    '/main.development.js'
   ].concat(devDeps.map(name => `/node_modules/${name}($|/)`))
+  .concat(
+    deps.filter(name => !electronCfg.externals.includes(name))
+      .map(name => `/node_modules/${name}($|/)`)
+  )
 };
 
 const icon = argv.icon || argv.i || 'app/app';
@@ -52,11 +60,20 @@ if (version) {
 }
 
 
+function build(cfg) {
+  return new Promise((resolve, reject) => {
+    webpack(cfg, (err, stats) => {
+      if (err) return reject(err);
+      resolve(stats);
+    });
+  });
+}
+
 function startPack() {
   console.log('start pack...');
-  webpack(cfg, (err, stats) => {
-    if (err) return console.error(err);
-    del('release')
+  build(electronCfg)
+    .then(() => build(cfg))
+    .then(() => del('release'))
     .then(paths => {
       if (shouldBuildAll) {
         // build for all platforms
@@ -76,7 +93,6 @@ function startPack() {
     .catch(err => {
       console.error(err);
     });
-  });
 }
 
 function pack(plat, arch, cb) {

package.json

@@ -5,15 +5,17 @@
   "description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
   "main": "main.js",
   "scripts": {
-    "test": "cross-env NODE_ENV=test mocha --compilers js:babel-core/register --recursive --require ./test/setup.js test/**/*.spec.js",
+    "test": "cross-env NODE_ENV=test mocha --compilers js:babel-register --recursive --require ./test/setup.js test/**/*.spec.js",
     "test-watch": "npm test -- --watch",
-    "test-e2e": "cross-env NODE_ENV=test mocha --compilers js:babel-core/register --require ./test/setup.js --require co-mocha ./test/e2e.js",
+    "test-e2e": "cross-env NODE_ENV=test mocha --compilers js:babel-register --require ./test/setup.js --require co-mocha ./test/e2e.js",
     "lint": "eslint app test *.js",
-    "hot-server": "babel-node server.js",
-    "build": "cross-env NODE_ENV=production babel-node ./node_modules/.bin/webpack --config webpack.config.production.js --progress --profile --colors",
+    "hot-server": "node -r babel-register server.js",
+    "build-main": "cross-env NODE_ENV=production node -r babel-register ./node_modules/.bin/webpack --config webpack.config.electron.js --progress --profile --colors",
+    "build-renderer": "cross-env NODE_ENV=production node -r babel-register ./node_modules/.bin/webpack --config webpack.config.production.js --progress --profile --colors",
+    "build": "npm run build-main && npm run build-renderer",
     "start": "cross-env NODE_ENV=production electron ./",
-    "start-hot": "cross-env HOT=1 NODE_ENV=development electron ./",
-    "package": "cross-env NODE_ENV=production babel-node package.js",
+    "start-hot": "cross-env HOT=1 NODE_ENV=development electron -r babel-register ./main.development",
+    "package": "cross-env NODE_ENV=production node -r babel-register package.js",
     "package-all": "npm run package -- --all",
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",
     "dev": "concurrently --kill-others \"npm run hot-server\" \"npm run start-hot\""
@@ -46,7 +48,6 @@
   "homepage": "https://github.com/chentsulin/electron-react-boilerplate#readme",
   "devDependencies": {
     "asar": "^0.10.0",
-    "babel-cli": "^6.6.5",
     "babel-core": "^6.7.4",
     "babel-eslint": "^6.0.0",
     "babel-loader": "^6.2.4",
@@ -103,7 +104,8 @@
     "react-router": "^2.0.1",
     "react-router-redux": "^4.0.0",
     "redux": "^3.3.1",
-    "redux-thunk": "^2.0.1"
+    "redux-thunk": "^2.0.1",
+    "source-map-support": "^0.4.0"
   },
   "devEngines": {
     "node": "4.x || 5.x",

webpack.config.electron.js

@@ -0,0 +1,45 @@
+import webpack from 'webpack';
+import baseConfig from './webpack.config.base';
+
+export default {
+  ...baseConfig,
+
+  devtool: 'source-map',
+
+  entry: './main.development',
+
+  output: {
+    path: __dirname,
+    filename: './main.js'
+  },
+
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false
+      }
+    }),
+    new webpack.BannerPlugin(
+      'require("source-map-support").install();',
+      { raw: true, entryOnly: false }
+    ),
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify('production')
+      }
+    })
+  ],
+
+  target: 'electron',
+
+  node: {
+    __dirname: false,
+    __filename: false
+  },
+
+  externals: [
+    ...baseConfig.externals,
+    'font-awesome',
+    'source-map-support'
+  ]
+};