parcelでVue.js試す最小構成のpackage.json

この記事について

さくっとJavascriptのライブラリの動作確認するときに、いつもはvue-cliでwebpackだが、偶然parcelに触れたので、最小構成を調べた。vue.js使ってて、少しparcelに興味がある人向けの記事。

parcelの記事を巡ると parcel-plugin-vue を使うケースがあるが、parcel1.7.0から本家でvueのコンパイルがサポートされ現在1.9.6（2018年7月時点）では不要。

要点

• parcel-plugin-vue は不要
• vueのランタイムビルド使う形に実装すれば
  • babel-preset-vue も不要
  • どのビルドを使うかはこの辺の公式ドキュメントを参照
• https://github.com/makitosan/simple-parcel-vue
• DEMO https://makitosan.github.io/simple-parcel-vue/

package.json

package.json

{
  "name": "simple-parcel-vue",
  "description": "Simple parcel vue.js example",
  "version": "1.0.0",
  "scripts": {
    "watch": "NODE_ENV=development parcel -d docs --no-hmr index.html --open",
    "prebuild": "rm -rf docs",
    "build": "NODE_ENV=production parcel build index.html -d docs --no-minify --public-url /simple-parcel-vue/"
  },
  "dependencies": {
    "vue": "^2.5.10",
    "vue-hot-reload-api": "^2.3.0"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^1.3.1",
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.9.6",
    "vue-template-compiler": "^2.5.16"
  }
}

• デモ用に github pages を使いたかったので -d docs と --public-url /simple-parcel-vue/ オプション入れた

.babelrc

{
  "presets": [
    "env"
  ]
}

main.js

main.js

...
new Vue({
    el: '#app',
    render: h => h(App) // this is not required full (including compiler) Vue
});

• こんな感じで render 使ってコンパイラ無しでいけるようにした