electron-userland/electron-compile is an open-source project on GitHub with 994 stars, written primarily in JavaScript. DEPRECATED: Electron supporting package to compile JS and CSS in Electron applications
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
Create a new file that will be the entry point of your app (perhaps changing 'main' in package.json) - you need to pass in the root directory of your application, which will vary based on your setup. The root directory is the directory that your package.json is in.
// Assuming this file is ./src/es6-init.js
var appRoot = path.join(__dirname, '..');
require('electron-compile').init(appRoot, require.resolve('./main'));
I did it, now what?
From then on, you can now simply include files directly in your HTML, no need for cross-compilation:
In your main file, before you create a BrowserWindow instance:
import {enableLiveReload} from 'electron-compile';
enableLiveReload();
React Hot Module Loading
If you are using React, you can also enable Hot Module Reloading for both JavaScript JSX files as well as TypeScript, with a bit of setup:
npm install --save react-hot-loader@next
Call enableLiveReload({strategy: 'react-hmr'}); in your main file, after app.ready (similar to above)
If you're using TypeScript, you're good out-of-the-box. If you're using JavaScript via Babel, add 'react-hot-loader/babel' to your plugins in .compilerc:
In your index.html, replace your initial call to render:
Typical code without React HMR:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MyApp } from './my-app';
ReactDOM.render(<MyApp/>, document.getElementById('app'));
Rewrite this as:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
const render = () => {
// NB: We have to re-require MyApp every time or else this won't work
// We also need to wrap our app in the AppContainer class
const MyApp = require('./myapp').MyApp;
ReactDOM.render(<AppContainer><MyApp/></AppContainer>, document.getElementById('app'));
}
render();
if (module.hot) { module.hot.accept(render); }
Something isn't working / I'm getting weird errors
electron-compile uses the debug module, set the DEBUG environment variable to debug what electron-compile is doing:
## Debug just electron-compile
DEBUG=electron-compile:* npm start
## Grab everything except for Babel which is very noisy
DEBUG=*,-babel npm start
How do I set up (Babel / Less / whatever) the way I want?
If you've got a .babelrc and that's all you want to customize, you can simply use it directly. electron-compile will respect it, even the environment-specific settings. If you want to customize other compilers, use a .compilerc or .compilerc.json file. Here's an example:
By far, the easiest way to do this is via using electron-forge. electron-forge handles every aspect of packaging your app on all platforms and helping you publish it. Unless you have a very good reason, you should be using it!
How can I precompile my code for release-time? (the hard way)
electron-compile comes with a command-line application to pre-create a cache for you.
Usage: electron-compile --appdir [root-app-dir] paths...
Options:
-a, --appdir The top-level application directory (i.e. where your
package.json is)
-v, --verbose Print verbose information
-h, --help Show help
Run electron-compile on all of your application assets, even if they aren't strictly code (i.e. your static assets like PNGs). electron-compile will recursively walk the given directories.
Does electron-userland/electron-compile have a project website?
No homepage URL was recorded for electron-userland/electron-compile in TopGit's last sync. The README tab above frequently contains screenshots and demo links, or check the repository description on GitHub.
Is electron-userland/electron-compile open source?
TopGit's metadata for electron-userland/electron-compile does not record a license. Most public repositories on GitHub ARE open source, but the exact terms vary — verify by opening the LICENSE file directly.
What is electron-userland/electron-compile?
electron-userland/electron-compile (electron-userland/electron-compile) is a JavaScript project on GitHub. From the project's own README: DEPRECATED: Electron supporting package to compile JS and CSS in Electron applications
Where do I read more about electron-userland/electron-compile?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/electron-userland/electron-compile is the definitive source.
Read full README in the tab above.
Is electron-compile worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of electron-compile.
/electron-compile
