はじめに

Vue.jsで素早くLPを作らなければならなくなった。
ビルドするのにwebpackやgulpなどがあるが、もっと手っ取り早くできる方法はないかと調べたところ、parcelを発見した。

準備

簡単に動作確認できるように最低限の準備

ディレクトリを作って`npm init`

$ mkdir hoge
$ cd hoge
$ npm init

最低限のファイルを作る

hoge
├── src
│   ├── index.html
│   ├── index.js
│   └── App.vue
└── package.json

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <div id="app"></div>
  <script src="index.js"></script>

</body>
</html>

index.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    render:h => h(App)
});

App.vue

<template>
  <p>{{ message }}</p>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        message: 'Hello'
      }
    }
  }
</script>

<style lang="scss">
p {
  font-size: 2em;
  text-align: center;
}
</style>

scssの必要はないけど、ちゃんと認識されるよってわかるようにつけてみた

npm install

vueとparcelをインストール

$ npm install --save-dev parcel-bundler vue

buildする

$ npx parcel build src/index.html

--out-dirで出力場所を指定できる（指定しないとdistに出力される）

これだけで、ビルドができた。

serverを立ち上げてみる

$ npx parcel start src/index.html

2020/02/28 修正
@saba_uni_toro_ さんありがとうございます

startはサーバーが立ち上がってリアルタイムで変更を反映してくれる優れもの。
開発中はとりあえずstartしとけばおk

scriptに追記する

使いやすいようにpackage.jsonのscriptに追記

package.json

{
  "name": "test-parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "parcel build src/index.html --out-dir public", // 追加
    "start": "parcel src/index.html", // 追加
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "parcel": "^1.12.3",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/component-compiler-utils": "^3.0.0",
    "sass": "^1.22.9",
    "vue-template-compiler": "^2.6.10"
  }
}

この設定をいれておけばnpm run start、npm run buildで完結するので良き。

便利なプラグイン

parcel-plugin-static-files-copy
プロジェクト直下（package.jsonがあるとこ）にstaticディレクトリを作って、
ファイルを放り込むと、buildするときにstatic内のものをコピーしてくれる。
cp static/* publicみたいな感じ。

まとめ

実質、parcelインストールしてbuildすれば終わり。
めちゃめちゃ楽だった。

懸念点

buildするたびにファイルが増える現象がある。
下記のコマンドをpackage.jsonのbuildの先頭に書いて一度全削除してbuildし直してもらうことで対応はできる。

ls -ad public/* | grep -v -E '^\\.$|^\\.\\.$' | xargs rm -rf

出力されたpublicを見ると全て展開されてごちゃごちゃになっていた。
まとめる方法ないかなぁ...

Parcel + Vue.js で素早く環境を作る。