vue-client + CoffeeScript 2.0(transpileいらない版)

## 概要

[以前](https://qiita.com/6in/items/f2f5a8f8ccd5e2f6b800)の記事では、UglifyJSがES6対応していなかったのですが、
最近uglifyjs-webpack-pluginが(1.0.0以降かな)でES6対応していたようなので、前の記事を元にリファクタしたのが、今回の内容です。

### 今回確認したモジュールのバージョン

| モジュール | バージョン |
| ---- | ---- |
| WebPack | ^3.6.0 |
| UglifyJS-webpack-plugin | ^1.1.1 |
| coffeescript | ^2.1.0 |
| coffee-loader | ^0.9.0 |

### 手順その１(モジュールインストール)

vue-clientにて、プロジェクトのひな形を作成します。

```shell-session
# ひな形作成
$ vue init webpack vue-coffee

# ひな形作成後、モジュールインストール

$ cd vue-coffee
(vue-coffee)$ npm install

# coffeescript,coffee-loaderをインストールします。
(vue-coffee)$ npm install --save-dev coffeescript \
  coffee-loader
```

### 手順その２(coffee-loaderの設定)

coffee-loaderの設定をするために、vue-loader.conf.jsを修正します。

```
build
├── build.js
├── check-versions.js
├── logo.png
├── utils.js
├── vue-loader.conf.js    <- これを修正
├── webpack.base.conf.js    
├── webpack.dev.conf.js
└── webpack.prod.conf.js
```

```js:build/vue-loader.conf.js

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

// ローダーオプションを取得
const loaders =  utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: isProduction
})

// coffee-loaderを追加
loaders.coffee = {
  loader: 'coffee-loader',
  options: {
    sourceMap: true
  }
}

module.exports = {
  loaders,　// <- 変更
```

### 手順その３(ソースを改修)

ひな形として出力されたソースをCoffeeScriptに変更してみます。

```html:src/component/HelloWorld.vue
<script lang="coffee">
#export default {
#   name: 'HelloWorld',
#   data () {
#     return {
#       msg: 'Welcome to Your Vue.js App'
#     }
#   }
#}
export default 
  name: 'HelloWorld'
  data: () ->
    msg: 'Welcome to Your Vue.js App'

</script>
```

ここまでこれば、webpackを実行して確認ができるようになります。

```shell-session
(vue-coffee)$ npm run start
```

起動後、http://localhost:8080/ にアクセスして確認してみてください。

### 手順その４(スクリプトファイルを分離)

vueファイル上でCoffeeScriptを書いていると、入力補完などが効かないため、スクリプトを外部ファイルに移動します。

```html:src/component/HelloWorld.vue
<script 
   lang="coffee" 
   src="./HelloWorld.coffee" 
/>
```

```coffeescript:src/component/HelloWorld.coffee
export default 
  mounted: ->
    func = ->
      new Promise((resolve) ->
        resolve(100)
      )
    # awaitで、promiseの結果を取得
    ret = await func()
    console.log { ret }

  data: ->
    name = "Your Name"
    # 文字列テンプレートを利用
    msg: "Welcome to #{name} Vue.js App" 
```

### 手順その５（ビルドする）

以下のコマンドで実行するとビルドされ、distディレクトリに、本番用ファイルが配置されます。

```shell-session
(vue-coffee)$ npm run build

(vue-coffee)$ tree dist
dist
├── index.html
└── static
    ├── css
    │   ├── app.593bddf07d739fd6e0ba6b96bf12a98d.css
    │   └── app.593bddf07d739fd6e0ba6b96bf12a98d.css.map
    └── js
        ├── app.0e8582572b37f4794a1a.js
        ├── app.0e8582572b37f4794a1a.js.map
        ├── manifest.5bb2552c976ea0cbaf07.js
        ├── manifest.5bb2552c976ea0cbaf07.js.map
        ├── vendor.0d21350e40a03910cf02.js
        └── vendor.0d21350e40a03910cf02.js.map
```

ビルドされたファイルは、webのルートで実行されるような設定になっているので、相対パスで参照できるように、config/index.jsを修正します。

```js:config/index.js

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    // assetsSubDirectory: 'static',
    // assetsPublicPath: '/',
    assetsSubDirectory: './static',  // <- 修正
    assetsPublicPath: './',          // <- 修正

```

ビルド後、httpサーバーを立ち上げてみます。

```shell-session
(vue-coffee)$ python3 -m http.server 
```

ブラウザにて、http://localhost:8000/dist/ にアクセスし、期待通りに表示されているかを確認してください。

## まとめ

* UglifyJSがES6の構文にも対応したことにより、CoffeeScript2での新機能が制限されることなく(たぶん)利用できるようになりました