vue-client + CoffeeScript 2.0(transpileいらない版) #Vue.js

概要

以前の記事では、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にて、プロジェクトのひな形を作成します。

# ひな形作成
$ 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

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に変更してみます。

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を実行して確認ができるようになります。

(vue-coffee)$ npm run start

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

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

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

src/component/HelloWorld.vue

<script 
   lang="coffee" 
   src="./HelloWorld.coffee" 
/>

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ディレクトリに、本番用ファイルが配置されます。

(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を修正します。

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サーバーを立ち上げてみます。

(vue-coffee)$ python3 -m http.server

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

まとめ

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