- Notifications
You must be signed in to change notification settings - Fork96
electron-userland/electron-compile
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This project is no longer maintained, pull requests are no longer being reviewed or merged and issues are no longer being responded to.
electron-compile compiles JS and CSS on the fly with a single call in your app's 'ready' function.
For #"auto">
For CSS:
- Less
- Sass / SCSS
- Stylus
For HTML:
- Jade
- Vue.js 2.0 Single-File Components
For JSON:
- CSON
Installelectron-prebuilt-compile instead of theelectron:
npm install electron-prebuilt-compile --save-dev
and keep using electron as usual.
Tada! You did it!
Yeah.electron-prebuilt-compile is like anelectron that Just Works with all of these languages above.
First, addelectron-compile andelectron-compilers as adevDependency.
npm install --save electron-compilenpm install --save-dev electron-compilers
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 yourpackage.json is in.
// Assuming this file is ./src/es6-init.jsvarappRoot=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><scriptsrc="main.coffee"></script><linkrel="stylesheet"href="main.less"/></head>
or just require them in:
require('./mylib')// mylib.ts
In your main file, before you create aBrowserWindow 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*asReactfrom'react';import*asReactDOMfrom'react-dom';import{MyApp}from'./my-app';ReactDOM.render(<MyApp/>,document.getElementById('app'));
Rewrite this as:
import*asReactfrom'react';import*asReactDOMfrom'react-dom';import{AppContainer}from'react-hot-loader';constrender=()=>{// 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 classconstMyApp=require('./myapp').MyApp;ReactDOM.render(<AppContainer><MyApp/></AppContainer>,document.getElementById('app'));}render();if(module.hot){module.hot.accept(render);}
electron-compile uses thedebug module, set the DEBUG environment variable to debug what electron-compile is doing:
## Debug just electron-compileDEBUG=electron-compile:* npm start## Grab everything except for Babel which is very noisyDEBUG=*,-babel npm start
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:
{"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
Withpassthrough 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" }}Byfar, the easiest way to do this is via usingelectron-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 ShowhelpRunelectron-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 ./static
Compilation also has its own API, check out thedocumentation for more information.
About
DEPRECATED: Electron supporting package to compile JS and CSS in Electron applications
Resources
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.