vue-client + CoffeeScript 2.0 #Vue.js

概要

※ CoffeeScriptのtranspileいらない版の記事を投稿しています。

vue-clientで作成したプロジェクトでCoffeeScript 2.0を利用するための設定のメモ書きです。

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

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

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

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

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

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

手順その２(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

また、理由は後述しますが、transpileオプションを用いて、ES6ではなくES5に変換します。

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,
    transpile: { presets: ['env']}
  }
}

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

手順その３(babelの設定)

webpackでビルドするときに、UglifyJsによるJSのの圧縮・最適化を行いますが、現在のところES6に対応していません。

ビルドエラーの例

(vue-coffee)$ npm run build
...
ERROR in static/js/app.fc42c7a50d21dd897075.js from UglifyJs
Unexpected character '`' [./path/to/source][static/js/app.fc42c7a50d21dd897075.js:34,11]

これを解消するためCoffeeScriptをコンパイル結果をES6ではなくES5へ変換します。
具体的には、babelを利用するために、.babelrcを修正します。

.babelrc

{
  "presets": [
    "es2015", // <= これを追加
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"]
}

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

ひな形として出力されたソースを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 
  name: 'HelloWorld'
  data: () ->
    msg: 'Welcome to Your 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/ にアクセスし、期待通りに表示されているかを確認してください。

まとめ

webpack難しい