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

5500 ワード
Vue.js parcel package.json package.json テキストリンク

この記事について

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

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

要点

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 使ってコンパイラ無しでいけるようにした
Homebrewのためのもう一つのカンニングペーパー(2022)
Excel 2000ファイルの読み込み