Vue.jsの単一ファイルコンポーネントをrollupでバンドルする

Vue.jsの単一ファイルコンポーネントをrollupでバンドルして利用する例です。

弊社ではWebシステムをいろいろ開発していますが、この際、管理画面が必要になることが多くあります。管理画面の基本的な機能をテンプレートとして持っておき、毎回各システムに合わせて拡張する形を取っていますが、この管理画面のテンプレートを少しずつVueコンポーネント化しています。

Vue.jsでコンポーネントを作成する際、以下のようにHTMLにテンプレートをタグで埋めこんでそれを参照することもできますが、少しシステムの規模が大きくなると扱いきれなくなります。

   <script type="text/x-template" id="accordion">
      <div class="accordion">
        ...
      </div>
    </script>

そこで、Vueには単一ファイルコンポーネントというものがあり、テンプレートや実装のJavaScriptコードを別ファイルに分離することができるようになっています。ただ、こちら(https://jp.vuejs.org/v2/guide/single-file-components.html)のドキュメントを読んでも具体的にどうすれば使えるのかがわかりづらいので、単一ファイルコンポーネントの作り方の例を示したいと思います。

私はライブラリ系のJavaScriptのバンドルはrollupで行うことが多いので、単一ファイルコンポーネントをrollupでバンドルしてみます。

全体構造

まずは全体の構造から。最終的なディレクトリ階層およびファイル配置は以下のようになります。

ファイル階層

vue-component/
  package.json
  rollup-config.js    rollup用設定ファイル
  src/
    components/
      message.vue     サンプルの単一ファイルコンポーネントのファイル
      message.js
    main.js           単一ファイルコンポーネントの読み込み

message.vue,message.jsが単一ファイルコンポーネントのファイルとなります。vue-component以下でnpm run buildを実行するとcomponents.jsをビルドします。

単一ファイルコンポーネントの作成

まずVueコンポーネントを作成します。拡張子が.vueのmessage.vueが単一ファイルコンポーネントの大本のファイルになります。ここにテンプレート、スタイル、JavaScriptをhtmlから独立したファイルとして記述します。今回はJavaScriptも<script>タグで別ファイル(message.js)から読み込むようにしています。

message.vue

<template>
  <p>{{ text }}</p>
</template>

<style scoped>
p {color: red;}
</style>

<script src="./message.js"></script>

message.js

// コンポーネントの実装コード
export default {
  props: ['text']
}

コンポーネントの内容としてはtextプロパティを持ち、それを表示するだけのコンポーネントです。

設定ファイルの作成

次にバンドルするための設定ファイルを作成します。まずnpmの設定ファイルpackage.jsonを作成します。必要なモジュールは以下のとおりです。

rollup
rollup-plugin-buble
rollup-plugin-commonjs
rollup-plugin-vue
vue-template-compile

上記のモジュールをdevDependenciesに直接追記するかnpm install -Dでモジュールを追加します。できあがったpackage.jsonは以下のようになります(以下の例ではnpm run buildで実行するコマンドも記述済み)。

なお、今回はminify等の余計な処理は省略しています。

package.json

{
  "name": "vue-single-file-component",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run build:iife",
    "build:iife": "rollup -c rollup-config.js"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "rollup": "^1.1.2",
    "rollup-plugin-buble": "^0.19.6",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.4"
  }
}

次にrollup用の設定ファイルを作成します。ポイントとしては以下のpluginを読み込んでいます。

rollup-plugin-vue
rollup-plugin-commonjs
rollup-plugin-buble

これでrollupから.vueファイルを読み込めるようになります。

rollup-config.js

import vue from 'rollup-plugin-vue'; // .vueファイルimport用
import commonjs from 'rollup-plugin-commonjs';
import buble from 'rollup-plugin-buble';

export default {
  input: 'src/main.js',
  output: {
    format: 'iife',
    sourcemap: true,
    file: 'build/components.js',
  },
  plugins: [
    commonjs(),
    vue(),
    buble(), // ES5 へトランスパイルする
  ],
};

最後にrollupのエントリポイントになるJavaScript(main.js)を作成します。このjsファイルでは、単一ファイルコンポーネント(.vueファイル)を読み込み、それをVue.component()でコンポーネント登録しています。コンポーネントが複数ある場合は、ここに列挙していきます。

src/main.js

import Message from './components/message.vue';

// <script>タグで読み込めばコンポーネントを登録する。
// 本モジュールはなにもexportしない。

Vue.component('Message', Message);

この例ではmessage.vueをMessageコンポーネントとして登録しているので、<Message>タグで呼び出すことができるようになります。

これで、全てのファイルが揃いました。npm installで必要モジュールをインストール後、rpm run buildを実行すればcomponents.jsがビルドされます。

バンドルしたコンポーネントの読み込み

最後にビルドしたcomponents.jsを読み込んで使ってみます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/components.js"></script>
<script>
  window.onload = function () {
    var vm = new Vue({
      el: "#container",
    });
  }
</script>
  </head>
  <body>
    <div id="container">
      <Message text="Hello!"></Message>
      <Message text="Hello!!"></Message>
    </div>
  </body>
</html>

components.jsを<script>タグで読み込んで、<Message>タグを使うだけです。上記htmlにブラウザからアクセスすれば、以下のように表示されるはずです。

これで、単一ファイルコンポーネントをバンドルして利用することができるようになりました。

[関連記事]

Vue3関連なら以下もご参照ください。

Vue3をrollupでバンドルする

今度はVue3のTypeScriptコンポーネントをrollupでバンドルする

投稿日:2019/06/08 00:28

タグ: Vue.js

ブログ