やりたいこと
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')