RollupJSでVueJSの環境を構築してみる

keyboard_arrow_left戻る
vue.js
rollup.js
単一ファイルコンポーネント

環境

  • windows 10 home

環境準備

Scoop（Macでいうbrew）を入れる

Powershellで以下のコマンドを実行

iwr -useb get.scoop.sh | iex

yarnを入れる

scoop install yarn

必要なJSモジュールを入れる

> yarn add vue rollup-plugin-vue rollup-plugin-node-resolve vue-template-compiler rollup
  • vue
    • vuejs本体
  • rollup-plugin-vue
    • rollupjsでvuejsをコンパイルするためのライブラリ
  • rollup-plugin-node-resolve
    • node_modulesフォルダから必要なファイルを抽出するモジュール
  • vue-template-compiler
    • vueの単一ファイルコンポーネントをコンパイルするプラグイン
  • rollup
    • rollupjsの本体

コンポーネントファイルの準備

TestComponent.vueファイルを作成します

<template>
    <div class="example">{{ message }}</div>
</template>

<script>
    export default {
        data () {
            return {
                message: 'Hello world!'
            }
        }
    }
</script>

<style>
    .example {
        color: red;
    }
</style>

コンポーネントファイルを単一ファイルコンポーネント化するためのJS

main.jsとします

import TestComponent from './TestComponent.vue';
import Vue from 'vue/dist/vue.esm.browser.js'

new Vue({
    el: "#app",
    components: {
        "TestComponent": TestComponent,
    },
});

rollup.jsのコンフィグファイルを作成

rollup.config.jsです。
これはお決まりなので、好きな名前では保存できません。

import vue from 'rollup-plugin-vue'
import nodeResolve from 'rollup-plugin-node-resolve'

export default {
  input: 'main.js',
  output: {
    format: 'iife',
    file: 'test-component.js'
  },
  plugins: [
    nodeResolve(),     // node_modules配下からvuejsを抽出
    vue()                    // コンパイル
  ]
}

読み込み用のHTMLファイルの作成

適当にindex.htmlとでも。

<!doctype html>
<html>
<head>
</head>

<body>

<div id="app">
    <test-component></test-component>
</div>
<script src="./test-component.js"></script>

</body>
</html>

コンパイル

> yarn rollup -c

これで、test-component.jsファイルが出来上がります。
index.htmlをブラウザで表示してみましょう！
赤色の「Hello world!」が表示されますね？

エラーで表示されない場合

ReferenceError: __vue_normalize__ is not definedというエラーが、ブラウザのコンソールに出て「Hello world!」が表示されてないかもしれません。
rollup-plugin-vue(v5.1.2)では依存関係のエラーが起こっているようです。
参考

なので、v5.1.2ではなく、v5.1.0を使ってあげましょう。

> yarn add rollup-plugin-vue@5.1.0

↑を実行後、再度yarn rollup -cを叩けば……問題ない！はず！！

参考