Electron + CoffeeScript

6339 ワード
Electron CoffeeScript CoffeeScript テキストリンク

CoffeeScript を使って Electron アプリケーションを書く方法を試してみました。reactjs - electronでbabel + reactを直接使えるようにするまで - Qiita を参考にしました。

たぶん、TypeScript なんかも同じように typescript-register とか使えばいけると思います。

ポイント

  • メインプロセスではまだ CoffeeScript 化は成功していない
  • レンダリングプロセスで coffee-script/register を require する

ソース

  • package.json
{
  "name": "testelectron",
  "main": "app.js",
  "scripts": {
    "run": "./node_modules/.bin/electron app.js"
  },
  "dependencies": {
    "coffee-script": "^1.9.2",
    "electron-prebuilt": "^0.26.0"
  }
}
  • app.js
var app = require('app');
var BrowserWindow = require('browser-window');
var mainWindow = null;

app.on('window-all-closed', function() {
    app.quit();
});

app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadUrl('file://' + __dirname + '/index.html');
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});
  • index.html
<!DOCTYPE html>
<html lang="ja">
  <title>greetings</title>
  <div id="greetings"></div>
  <script>
    require('coffee-script/register');
    require('./renderer.coffee')
  </script>
</html>
  • renderer.coffee
greetings = document.getElementById 'greetings'
greetings.innerHTML = "hello, world."

実行

$ npm install
$ ./node_modules/.bin/electron app.js
Qt Qmlステータスマシンフレームワーク
poj 1088スキーダイナミックプランニング