やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

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

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

JavaScript

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

成果物

github.com

要点

  • 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();
        }
    };
});

開発環境

2018-04-21時点。

所感

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