Node.js不要。ブラウザとネット接続だけ。

成果物

github.com

demo list
- demo

要点

require.jsでモジュール化（JSファイル分割）
BabelでES6(ES2015)のコードをトランスパイル（「アロー関数」構文）
require.js, Babel, はCDNのURLを設定して入手する（要ネット接続）

コード

構成

index.html
app.js
js/app
- main.js
- sub.js

ファイル

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Babel + require.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
    <script data-main="app.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
</head>
<body></body>
</html>

app.js

requirejs(['js/app/main.js']);

js/app/main.js

define(function(require, exports, module) {
    var sub = require('js/app/sub');
    console.log(sub);
    sub.print();
});

js/app/sub.js

define(function() {
    return {
        print: function() {
        const getMessage = () => "Hello Babel + require.js !!";
        document.body.innerHTML = getMessage();
        }
    };
});

開発環境

Raspberry Pi 3 Model B
- Raspbian GNU/Linux 8.0 (jessie)
  - Chromium 51.0.2704.91

2018-04-21時点。

所感

importやESM(<script type="module">)が使えるようになるまでは、これをテンプレにしようかな。