webpackでcoffeescript2を使おう(vueもあるよ)

とうとう待望のcoffeescript2が正式にリリースされました。
早速使ってみましょう。

coffeescript2のインストール

普通にインストールすればいいです。

$ yarn add -D coffeescript

注意点としては2.0になった段階でcoffee-scriptからcoffeescriptに名前が変わったことです。

coffee-scriptを既にインストールしていた場合は削除しておきましょう。

$ yarn remove coffee-script

coffee-loaderも0.8.0からcoffeescript2に対応しているので、すでに入っている場合はupgradeします。

$ yarn upgrade coffee-loader

なければインストール

$ yarn add -D coffee-loader

babelのインストール

coffeescriptをupgradeするだけならこれで終わりなのですが、coffeescript2はes2015にコンパイルされるため、古いブラウザで動かすためにはbabel等で更にコンパイルする必要があります。

babelをインストールしましょう。
おそらくこれが最小構成です。

$ yarn add -D babel-core babel-loader babel-preset-es2015

.babelrcをプロジェクトのルートディレクトリに置きます。

.babelrc

{
  "presets": ["es2015"]
}

webpackを書き換えて、babelを通してあげます。

webpack.config.coffee

      {
        test: /\.coffee$/
        loader: 'babel-loader!coffee-loader'
      }

以上で終了！
おめでとう。

vue-loaderの設定

ここから先はvue-loaderを使う場合だけの設定です。

webpack.configのvue-loaderの部分を書き換えてあげます。

webpack.config.coffee

      {
        test: /\.vue$/
        loader: 'vue-loader'
        options:
          loaders:
            coffee: 'babel-loader!coffee-loader'
      }

上記の設定の場合vueファイルのlangを省略せずに書く必要があります。
(langはsublimeなどでハイライトするのに有用な情報なので省略しないのが吉)

hoge.vue

<!-- langを省略しない -->
<script lang="coffee">
module.exports = {
  name: 'Hoge'
}
</script>

これでちゃんとコンパイルされるはずです。
お疲れ様でした！