AMD+ES6(require.js + Babel) on CDN ブラウザだけで完結！モジュール化＆トランスパイル (original) (raw)

この広告は、90日以上更新していないブログに表示しています。

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

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">)が使えるようになるまでは、これをテンプレにしようかな。