electron-compile
electron-compile compiles JS and CSS on the fly with a single call in your app's 'ready' function.
For JavaScript:
- JavaScript ES6/ES7 (via Babel)
- TypeScript
- CoffeeScript
For CSS:
- Less
For HTML:
- Jade
For JSON:
- CSON
How does it work? (Easiest Way)
Change your reference to electron-prebuilt to electron-prebuilt-compile. Tada! You did it.
Wait, seriously?
Yeah. electron-prebuilt-compile is like an electron-prebuilt that Just Works with all of these languages above.
How does it work? (Slightly Harder Way)
First, add electron-compile and electron-compilers as a devDependency.
npm install --save electron-compilenpm install --save-dev electron-compilersCreate 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.jsvar appRoot = path; // ...and that your main app is called ./src/main.js. This is written as if// you were going to `require` the file from here.;I did it, now what?
From then on, you can now simply include files directly in your HTML, no need for cross-compilation:
or just require them in:
// mylib.tsSomething 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 startHow 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 file. Here's an example:
"application/javascript": "presets": "stage-0" "es2015" "react" "sourceMaps": "inline" "text/less": "dumpLineNumbers": "comments" .compilerc also accepts environments with the same syntax as .babelrc:
"env": "development": "application/javascript": "presets": "stage-0" "es2015" "react" "sourceMaps": "inline" "text/less": "dumpLineNumbers": "comments" "production": "application/javascript": "presets": "stage-0" "es2015" "react" "sourceMaps": "none" The opening Object is a list of MIME Types, and options passed to the compiler implementation. These parameters are documented here:
- Babel - http://babeljs.io/docs/usage/options
- CoffeeScript - http://coffeescript.org/documentation/docs/coffee-script.html#section-5
- TypeScript - https://github.com/Microsoft/TypeScript/blob/v1.5.0-beta/bin/typescriptServices.d.ts#L1076
- Less - http://lesscss.org/usage/index.html#command-line-usage-options
- Jade - http://jade-lang.com/api
How can I precompile my code for release-time?
electron-compile comes with a wrapper around the electron-packager project, electron-packager-compile (if you use the electron-prebuilt-compile project, this will just be electron-packager). Run it the same way you run electron-packager and the compilation wire-up will be done in the background.
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 -v, --verbose Print verbose information -h, --help Show helpRun 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.
electron-compile --appDir /path/to/my/app ./src ./staticBut I use Grunt / Gulp / I want to do Something Interesting
Compilation also has its own API, check out the documentation for more information.