I've been struggling with this for a week now so I thought I'd reach out to the amazing SO community for help. I've got an Electron project that needs to produce an OS X application (and Windows eventually). Initially we were using webpack
to bundle everything (electron
and front-end code) but, with the addition of some features that utilize ffi
, this was no longer an option. After switching to using gulp
to transpile and uglify the electron
code, the app was working in development.
The problem I'm having is, when using electron-packager
, none of my node_modules
are being bundled during the build. According to the docs, electron-packager
should bundle anything listed in the dependencies
section of package.json
. I built a simple proof-of-concept app to simplify things and modules still aren't being bundled for the electron
code. This new, simplified project is just trying to include bunyan
(this also fails for ffi
) but, after building, the app complains that the bunyan
module cannot be found. Can someone help? Am I missing something small but important? Here's some detail to the project:
Environment Details
- OSX Version: 10.11.6 (15G1108)
- Node Version: 5.2.0 (using
nvm
) npm
version: 3.3.12
package.json
{
"name": "build-with-native-modules",
"version": "1.0.0",
"description": "A test for Electron packages with native Node modules.",
"main": "el/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "./node_modules/.bin/rimraf build",
"start": "npm run clean && gulp && ./node_modules/.bin/electron ./build/dist/el/main.js",
"electron:rebuild": "./node_modules/.bin/electron-rebuild",
"build:osx": "gulp build:osx",
"cinstall": "rm -Rf ./node_modules && npm cache clean && npm i && npm run electron:rebuild"
},
"postinstall": "install-app-deps",
"author": "Zachary Abresch <[email protected]>",
"license": "MIT",
"dependencies": {
"bunyan": "^1.8.4",
"jquery": "^3.1.1"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-0": "^6.16.0",
"babel-register": "^6.18.0",
"electron": "1.4.6",
"electron-packager": "^8.2.0",
"electron-rebuild": "^1.3.0",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.6.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-util": "^3.0.7",
"rimraf": "^2.5.4",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
gulpfile.babel.js
import gulp from 'gulp';
import babel from 'gulp-babel';
import gutil from 'gulp-util';
import webpack from 'webpack';
import packager from 'electron-packager';
import webpackConfig from './webpack.config.babel';
import pack from './package.json';
gulp.task('electron:babel', () => {
gulp.src('src/el/**/*.js', { base: 'src' })
.pipe(babel())
.pipe(gulp.dest('build/dist'));
});
gulp.task('move:html', () => {
gulp.src('src/ui/**/*.html', { base: 'src' })
.pipe(gulp.dest('build/dist'));
});
gulp.task('move:package', () => {
gulp.src('package.json', { base: './' })
.pipe(gulp.dest('build/dist'));
});
gulp.task('ui:webpack', (done) => {
const myConfig = Object.create(webpackConfig);
webpack(myConfig, (err, stats) => {
if (err) throw new gutil.PluginError('ui:webpack', err);
gutil.log('[ui:webpack]', stats.toString({ colors: true }));
done();
});
});
const osxBuildOptions = {
arch: 'x64',
'app-copyright': '8x8, Inc.',
'app-version': '1.0.0',
'build-version': '1.0.0',
dir: './build/dist',
name: pack.name,
out: './build/bundle',
overwrite: true,
version: pack.devDependencies.electron,
};
gulp.task('build:osx',
['move:package', 'electron:babel', 'ui:webpack', 'move:html'],
(done) => {
packager(osxBuildOptions, (err, appPath) => {
if (err) throw new gutil.PluginError('electron-packager', err);
gutil.log(`[build:osx] App built in: ${appPath}`);
done();
});
});
gulp.task('default', ['electron:babel', 'ui:webpack', 'move:html']);
webpack.config.babel.js
import path from 'path';
module.exports = {
target: 'electron',
entry: './src/ui/renderer.js',
output: {
path: path.resolve(__dirname, 'build/dist/ui'),
filename: 'ui.bundle.js',
},
module: {
loaders: [
{
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'src/ui'),
],
test: /\.js/,
},
],
},
};
I'm considering trying out electron-builder
but I really feel like this should be working. If anyone has any info or insight I'd greatly appreciate it. If you need any additional information, please let me know in the comments. Thanks!