概要

Railsで、Webpacker使ってVueで開発しようとしてたけど、lintの設定とかtypescriptの環境作りとか面倒なので、vue-cli3を使ってみたかった。

ただ、RailsのSlim上のDOM要素をマウントさせたいので、JSファイルとかCSSファイルをコンパイルして、Railsのpublic フォルダ内に配置したかった。（この設計が正しいかは置いといて技術要件としてあった）

そこで、いろいろ調べてみたことのメモ

2018/8/31追記

Async Web Component
JSファイルのコンパイルには、こっち使った方がいいかも？
1つの管理ファイルだけ最初に読み込んで、非同期で必要なコンポーネントだけ遅延ロードしてくれるらしい。
digest管理がどうなってるかわかんないので再調査
気になるのは、JSを一ファイルにまとめられないところ

IE11で使えなかった...
https://github.com/vuejs/vue-web-component-wrapper#compatibility

簡単な流れ

Railsのフォルダ内に、マニュアル通りvue-cliでプロジェクトを作る
プロジェクトのルートに、vue.config.jsを作る。（中身は下記）
いろいろ修正
- public ディレクトリの中身が、全部いらないので削除
- コンパイルしたいtsファイルを、packsフォルダ作ってそこに写す
- imageの読み込みを src="./assets/logo.png" から、:src="require('./assets/logo.png')" に変更
yarn run build 実行
manifest.json を参照して、Railsから読み込み！
- https://inside.pixiv.blog/subal/4615
  - こちらのサイトが凄く参考になりました。

webpackの設定

vue.config.js にwebpackの設定は書く。

vue.config.js

const path = require('path')
const glob = require('glob')
const ManifestPlugin = require('webpack-manifest-plugin');

// 指定のフォルダにあるtsファイルを全部コンパイル対象に！
let entry = {}
glob.sync("./src/packs/*.ts").map(file => {
  entry[file.replace('./src/packs/', '').replace('.ts', '')] = file
})

module.exports = {
  // コンパイル後のファイルの設置先。
  outputDir: '../public/dist/',
  configureWebpack: {
    plugins: [
      // cookie管理のために必要
      new ManifestPlugin({
        fileName: 'manifest.json',
        publicPath: '/dist/',
        writeToFileEmit: true
      })
    ],
    entry
  },
  // imageだけは、パス指定が必要。JSとCSSは、Rails側でパスを指定できるので必要ない。
  chainWebpack: config => {
    config.module
      .rule('images').use('url-loader')
      .tap(options =>
        Object.assign({}, options, {
          publicPath: './dist/'
        })
      )
  }
}

感想

Railsからフロントエンドがある程度脱却できそうでよかった！
vue ui ってしたら出てくるコンソールが、かっこいい！
簡単にtypescriptの設定とかできてほんと楽！
webpackの設定全部消して、デフォルトにしちゃえば、SPAにすぐ移行できそう！

困ってること

entryに初期設定の「app」があって、これをどうやって消したらいいか調査中
全体的にもっといい方法ありそうなので、もしあったら教えてください！

Railsのフロントエンドを、Webpackerからvue-cli3に移行できないか調査

概要

2018/8/31追記

簡単な流れ

webpackの設定

感想

困ってること

参考