browserify+vuejs+vue-routerでコンポーネントを分割する

スポンサーリンク
Pocket
LINEで送る

Vuejsはwebpackやbrowserifyといったモジュール管理ツールを使わなくてもそれなりにアプリケーションを作れますが、規模が大きくなるとソースの管理が大変になるので結局モジュール管理をする必要が出てきます。

 

今回は、browserifyとVuejsとvue-routerを使ってコンポーネントを別ファイルに分けて管理していきたいと思います。

必要なもの

 

browserifyと他ツール

javascriptをモジュール管理するツール。browserifyで複数のコンポーネントファイルをビルドして一つのファイルにします。

babelify: babelifyはbrowserifyでビルドするときにbabelでトランスパイルしてくれます。

babel-preset-es2015: babelのes2015用

babel-plugin-transform-runtime: 

 

vuejs

今回使うjavascriptライブラリの本体。これがないと始まりません。

 

vue-router

Vuejsにはルーティング機能がないので公式のルーティングライブラリを読み込ませる必要があります。

これを使うと画面遷移をせずにURLが切り替わり、ブラウザに履歴も残してくれます。

 

vueify

browserifyで.vueファイルをビルドするために必要

単一コンポ-ネントのファイル名は.vueという拡張子になります。

この.vueファイルにはtemplateとscriptとstyleを一つのファイルの中で定義することができます。

 

 

まずは、npmで各種ツールをインストールします。

npm install --save-dev browserify vueify babel-preset-es2015 babel-plugin-transform-runtime babelify

 

ファイルを作成

次に以下のようなファイルを作っていきます。

index.html

main.js 

component

-app.vue

-foo.vue

-bar.vue

 

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src='bundle.js'></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

bundle.jsは後にbrowserifyで生成するjavascriptです。

 

main.js

window.onload = function(){
  const Vue = require('vue');
  const VueRouter = require('vue-router');

  Vue.use(VueRouter);

  const App = require('./component/app.vue');
  const Bar = require('./component/bar.vue');
  const Foo = require('./component/foo.vue');

  const routes = [
    { path: '/bar', component: Bar },
    { path: '/foo', component: Foo },
  ]
 
  const router = new VueRouter({
    mode: 'history',
    routes
  })
  const app = new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')

}

 

npmでインストールされるVue本体はランタイム限定ビルドなのでtemplateコンパイラが内臓されていません。

なのでrender関数を使う必要があります。

 

vue-routerの使い方に関してはこちらの記事に書いています

vue-routerを使ってみる。静的ルートマッチと動的ルートマッチ

スポンサーリンク

 

app.vue

<template>
 <div>
   <h1 v-text="message"></h1>
   <router-link to="bar">App</router-link>
   <router-link to="foo">Foo</router-link>
   <router-view></router-view>
 </div>
</template>
<script>
module.exports = {
 data: function(){
   return {
     message: "ここが最初のページ"
   }
 }
}
</script>

router-viewタグの中にルートにマッチしたコンポーネントが表示されます。

 

templateの中には必ずルートが必要です。

これはルートがないのでNG

<template>
  <h1>タイトル</h1>
  <div>タイトルだよ</div>
</template>

 

以下はOK

<template>
   <div>
      <h1>タイトル</h1>
      <div>タイトルだよ</div>
   </div>
</template>

 

foo.vue

<template>
  <div>
    <h1>Foo</h1>
    <p v-text="message"></p>
  </div>
</template>
<script>
module.exports = {
  data: function(){
    return {
      message: "fooだよ"
    }
  }
}
</script>

 

bar.vue

<template>
  <div>
    <h1>Bar</h1>
    <p v-text="message"></p>
  </div>
</template>
<script>
module.exports = {
  data: function(){
    return {
      message: "barだよ"
    }
  }
}
</script>

 

browserifyでビルドする

作成したファイルをbrowserifyでビルドします。

package.jsonを編集します。

"browserify": {
  "transform": [
    "babelify",
    "vueify"
  ]
}

これを追記します。これでbrowserifyビルド時にbabelifyとvueifyが実行されます

 

最後にnpmscriptでビルドを実効できるようにします。

scriptsの中に

"build": "browserify main.js -o bundle.js"

これでnpm run buildでビルドできるようになります。

ビルドするとbundle.jsが生成されます。

 

ブラウザで確認してみると

barとfooを押すとコンテンツが切り替わります。

こんな感じでコンポーネントを分けてみました。

今回の記事で作られるファイルは開発モードでエラーや警告文が表示されます。

本番には必要のない機能なのでプロダクション環境に上げる場合はproductionモードに変更する必要があります。