ブラウザで簡単に ESNext デコレータを試す方法

babel-standalone を使うと、ビルド設定なしで、ブラウザ上で直接 JS のデコレータを試すことができます。

<script src="https://unpkg.com/babel-standalone"></script>

<script type="text/babel" data-plugins="transform-decorators-legacy">
const myDecorator = (cls) => {
  cls.foo = 1
}

@myDecorator
class Foo {
}

alert(`Foo.foo=${Foo.foo}`) // => 1
</script>

ポイントは srcript タグの src="text/babel" と data-plugins="transform-decorators-legacy". 以上の設定でブラウザ上で実行時に babel の transpile が decorators 入りで走るようになります。

Codepen

Codepen でも、JS トランスパイルの設定を babel にすることでデコレータが使えるようになります。

デモ