vueでisomorphic-gitを利用する

やりたいこと

vueでisomorphic-gitを利用する。
DBはブラウザのIndexedDBを利用。

必要なもの

• vue
• node
• npm
• isomorphic-git
• browserfs
• yarn (これはお好み)

install 環境構築

$ yarn global add vue-cli        # or $ npm i -g vue-cli
$ vue init webpack nantokakantoka-project
$ cd nantokakantoka-project
$ yarn     # or $ npm i

使いたいモジュールをinstall

$ yarn add isomorphic-git
$ yarn add browserfs

src/App.vue を以下に変更

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  async mounted () {
    const git = require('isomorphic-git');
    const BrowserFS = require('browserfs');
    BrowserFS.configure({ fs: "IndexedDB", options: {} }, function (err) {
      if (err) return console.log(err)
      const fs = BrowserFS.BFSRequire("fs")
      const files = git.listFiles({fs, dir: '/'})
      console.log(files)
    })
  },
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

実行

$ yarn dev

config/index.jsのmodule.exportsのdevのportを確認(自分は8080)
http://localhost:8080にブラウザでアクセス
ブラウザのコンソールを確認

注意

importを使うと、何故かだめだったので、requireで利用

import git from 'isomorphic-git'
import BrowserFS from 'browserfs'

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

const git = require('isomorphic-git');
const BrowserFS = require('browserfs')

作成したリポジトリ

github.com