ES6で関数を定義して、HTMLのonclickイベントで実行する

<button onclick="hoge()">

このようなHTMLがあり、jsで定義した関数hoge()をonclickで実行したい場合、普通のjsであれば以下のように記述すれば実行できます。

function hoge() { ...処理 }

ですが、ES6をBabelなどでコンパイルさせたjsの場合、上記のように記述をすると「関数が定義されていない」とブラウザからエラーが返ってきます。

この場合、以下のように定義してあげると、正しく関数をonclickでも実行できます。

window.hoge = hoge

もし、exportなどでファイルを分けている場合、以下のようになります。

// Hoge.js
export const hoge = () => {
  // 処理
}

// index.js
import { hoge } from "./Hoge";
window.hoge = hoge;