ParcelJSでVueJSを使ってみる

keyboard_arrow_left戻る
parcel.js
vue.js

設定ファイルが不要という、ParcelJSを触ってみましょう。
2019/09/23現在では、ParcelJSの公式にVueJSの使い方が載っていなかったので、
このやり方で合ってるかはわかりませんが、やばかった。

ParcelJSの準備

npm install -g parcel-bundler

インストールが終わったら、正常にインストールされているかの確認

parcel -V
# 1.12.3

VueJSの準備

yarn add vue

node_modulesフォルダが作成される。

ファイルの準備

適当に準備していきます。
全部同階層に置いていきます。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    hoge page

    <hr>

    <div id="app"></div>

    <script src='./dist/app.js'></script>
</body>
</html>

app.js

import Vue from './node_modules/vue/dist/vue';
import MyApp from './MyApp.vue';

new Vue({
  el: '#app',
  components: {
    MyApp,
  },
  template: '<my-app></my-app>',
});

以上です。

ビルドする

ParcelJSでVueJSの単一ファイルコンポーネントをビルドしてみます。

parcel app.js

これで終わりです。

ビルドが完了すると、distフォルダが作成され、その中に同名のapp.jsが作成されていると思います。
上の方で作成したindex.htmlはこのdist配下のapp.jsを読み込むようにしています。

ブラウザで見てみる

hoge pageという文字の下に、VueJSのコードで出力するように設定している
「HelloWorld」が表示されていることが確認できます。

……え？簡単すぎね
やばくね？