electron-compile
Electron supporting package to compile JS and CSS in Electron applications
Last updated a year ago by paulcbetts .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install electron-compile 
SYNC missed versions from official npm registry.

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
  • GraphQL

For CSS:

  • Less
  • Sass / SCSS
  • Stylus

For HTML:

  • Jade
  • Vue.js 2.0 Single-File Components

For JSON:

  • CSON

How does it work? (Easiest Way)

Install electron-prebuilt-compile instead of the electron:

npm install electron-prebuilt-compile --save-dev

and keep using electron as usual.

Tada! You did it!

Wait, seriously?

Yeah. electron-prebuilt-compile is like an electron 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-compile
npm 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 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:

<head>
  <script src="main.coffee"></script>
  <link rel="stylesheet" href="main.less" />
</head>

or just require them in:

require('./mylib')   // mylib.ts

Live Reload / Hot Module Reloading

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:

  1. npm install --save react-hot-loader@next
  2. Call enableLiveReload({strategy: 'react-hmr'}); in your main file, after app.ready (similar to above)
  3. 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"]
  }
}
  1. 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:

{
  "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:

How can I compile only some file types but not others?

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"
  }
}

How can I precompile my code for release-time?

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.

electron-compile --appDir /path/to/my/app ./src ./static

But I use Grunt / Gulp / I want to do Something Interesting

Compilation also has its own API, check out the documentation for more information.

Current Tags

  • 6.4.3-beta.1                                ...           beta (2 years ago)
  • 6.4.4                                ...           latest (a year ago)

95 Versions

  • 6.4.4                                ...           a year ago
  • 6.4.3                                ...           2 years ago
  • 6.4.3-beta.1                                ...           2 years ago
  • 6.4.2                                ...           3 years ago
  • 6.4.1                                ...           3 years ago
  • 6.4.0                                ...           3 years ago
  • 6.3.1                                ...           3 years ago
  • 6.3.0                                ...           3 years ago
  • 6.2.0                                ...           3 years ago
  • 6.2.0-beta.1                                ...           3 years ago
  • 6.1.3                                ...           3 years ago
  • 6.1.2                                ...           3 years ago
  • 6.1.1                                ...           3 years ago
  • 6.1.0                                ...           3 years ago
  • 6.0.0                                ...           3 years ago
  • 6.0.0-beta.1                                ...           3 years ago
  • 5.1.3                                ...           3 years ago
  • 5.1.2                                ...           3 years ago
  • 5.1.1                                ...           3 years ago
  • 5.1.0                                ...           3 years ago
  • 5.0.0                                ...           3 years ago
  • 4.0.4                                ...           3 years ago
  • 4.0.3                                ...           3 years ago
  • 4.0.2                                ...           4 years ago
  • 4.0.1                                ...           4 years ago
  • 3.3.6                                ...           4 years ago
  • 4.0.0                                ...           4 years ago
  • 3.3.5                                ...           4 years ago
  • 3.3.4                                ...           4 years ago
  • 3.3.3                                ...           4 years ago
  • 3.3.2                                ...           4 years ago
  • 3.3.1                                ...           4 years ago
  • 3.3.0                                ...           4 years ago
  • 3.2.6                                ...           4 years ago
  • 3.2.5                                ...           4 years ago
  • 3.2.4                                ...           4 years ago
  • 3.2.3                                ...           4 years ago
  • 3.2.2                                ...           4 years ago
  • 3.2.1                                ...           4 years ago
  • 3.2.0                                ...           4 years ago
  • 3.1.3                                ...           4 years ago
  • 3.1.2                                ...           4 years ago
  • 3.1.1                                ...           4 years ago
  • 3.1.0                                ...           4 years ago
  • 3.0.1                                ...           4 years ago
  • 3.0.0                                ...           4 years ago
  • 2.1.4                                ...           4 years ago
  • 2.1.3                                ...           4 years ago
  • 2.1.2                                ...           4 years ago
  • 2.1.1                                ...           4 years ago
  • 2.1.0                                ...           4 years ago
  • 2.0.8                                ...           4 years ago
  • 2.0.7                                ...           4 years ago
  • 2.0.6                                ...           4 years ago
  • 2.0.5                                ...           4 years ago
  • 2.0.4                                ...           4 years ago
  • 2.0.3                                ...           4 years ago
  • 2.0.2                                ...           4 years ago
  • 2.0.1                                ...           4 years ago
  • 2.0.0                                ...           4 years ago
  • 2.0.0-beta6                                ...           4 years ago
  • 2.0.0-beta5                                ...           4 years ago
  • 2.0.0-beta4                                ...           4 years ago
  • 2.0.0-beta3                                ...           4 years ago
  • 2.0.0-beta2                                ...           4 years ago
  • 2.0.0-beta1                                ...           4 years ago
  • 1.0.2                                ...           4 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 0.9.2                                ...           5 years ago
  • 0.9.1                                ...           5 years ago
  • 0.9.0                                ...           5 years ago
  • 0.8.3                                ...           5 years ago
  • 0.8.2                                ...           5 years ago
  • 0.8.1                                ...           5 years ago
  • 0.8.0                                ...           5 years ago
  • 0.7.4                                ...           5 years ago
  • 0.7.3                                ...           5 years ago
  • 0.7.2                                ...           5 years ago
  • 0.7.1                                ...           5 years ago
  • 0.7.0                                ...           5 years ago
  • 0.6.6                                ...           5 years ago
  • 0.6.5                                ...           5 years ago
  • 0.6.4                                ...           5 years ago
  • 0.6.3                                ...           5 years ago
  • 0.6.2                                ...           5 years ago
  • 0.6.1                                ...           5 years ago
  • 0.6.0                                ...           5 years ago
  • 0.5.0                                ...           5 years ago
  • 0.4.0                                ...           5 years ago
  • 0.3.1                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Downloads
Today 0
This Week 40
This Month 40
Last Day 16
Last Week 111
Last Month 732
Dependencies (11)
Dependents (97)

Copyright 2014 - 2016 © taobao.org |