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
- Sass / SCSS
- Stylus
For HTML:
- Jade
- Vue.js 2.0 Single-File Components
For JSON:
- CSON
Use electron-prebuilt-compile instead of the electron module. Tada! You did it.
Yeah. electron-prebuilt-compile is like an electron that Just Works with all of these languages above.
First, add electron-compile and electron-compilers as a devDependency.
npm install --save electron-compile
npm 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.js
var appRoot = path.join(__dirname, '..');
require('electron-compile').init(appRoot, require.resolve('./main'));From then on, you can now simply include files directly in your HTML, no need for cross-compilation:
<head>
<script src="main.coffee"></script>
<link rel="stylesheet" href="main.less" />
</head>or just require them in:
require('./mylib') // mylib.tsIn your main file, before you create a BrowserWindow instance:
import {enableLiveReload} from 'electron-compile';
enableLiveReload();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, afterapp.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:
{
"application/javascript": {
"presets": ["react", "es2017-node7"],
"plugins": ['react-hot-loader/babel', 'transform-async-to-generator']
}
}- In your
index.html, replace your initial call torender:
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); }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 startIf 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:
{
"application/javascript": {
"presets": ["es2016-node5", "react"],
"sourceMaps": "inline"
},
"text/less": {
"dumpLineNumbers": "comments"
}
}.compilerc also accepts environments with the same syntax as .babelrc:
{
"env": {
"development": {
"application/javascript": {
"presets": ["es2016-node5", "react"],
"sourceMaps": "inline"
},
"text/less": {
"dumpLineNumbers": "comments"
}
},
"production": {
"application/javascript": {
"presets": ["es2016-node5", "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 - https://web.archive.org/web/20160110101607/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
With passthrough enabled, electron-compile will return your source files completely unchanged!
In this example .compilerc, JavaScript files won't be compiled:
{
"application/javascript": {
"passthrough": true
},
"text/less": {
"dumpLineNumbers": "comments"
}
}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!
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 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 ./staticCompilation also has its own API, check out the documentation for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent