vue-electron 구성 요소간에 공유 Javascript 코드를로드

Question

나는 vue init simulatedgreg/electron-vue <my project name>을 사용하여 새로운 vue-electron 프로젝트를 만들었습니다. 그래서 (src/rendered/components/Tagger/TagList.vue) 같은 데이터베이스 백엔드를 사용하는 몇 가지 기본 구성 요소를 만들 수 있습니다

<template> 
    <ul> 
    <li v-for="tag in tags"> 
     <input type="checkbox" :id="tag" :value="tag" v-model="selectedTags"> 
     <label :for="tag">{{ tag }}</label> 
    </li> 
    </ul> 
</template> 

<script> 
export default { 
    data() { 

    var db, sqlite3, tags; 
    sqlite3 = require('sqlite3'); 
    db = new sqlite3.Database('/tmp/tagister.tmp.sqlite3'); 
    tags = []; 
    db.each("SELECT id,tag FROM tags", function(err, row) { 
     tags.push(row.tag) 
    }); 
    db.close; 

    return { 
     tags: tags, 
     selectedTags: ['someTag'] 
    } 
    } 
} 
</script> 

<style> 
</style> 

나는 Tagger.vue을 수입 해당 구성 요소와는 SQLite는 데이터베이스에서 태그 목록을 잡아 당겨 제대로 렌더링이.

이제 여러 구성 요소와 함께 사용할 수 있도록 데이터베이스 코드를 추상화하려고합니다. 나는 database.js을 만들었습니다. 내가 src과 src/main에 배치 시도하고 var db = requrie('database') 및 var db = require('src/main/database') 및 여러 가지 다른 변형을 사용하여 가져 오기를 시도했습니다

"use strict"; 

sqlite3 = require('sqlite3') 

export default class Database { 
    constructor(dbFile) { 
    this.db = new sqlite3.Database(dbFile); 
    log.console('Opened Database: ' + dbFile) 
    } 

    tags() { 
    var tags = []; 
    this.db.each("SELECT id,tag FROM tags", function(err, row) { 
     tags.push(row.tag) 
    }); 
    return tags; 
    } 

    files() { 
    var files = []; 
    this.db.each("SELECT id,name FROM files", function(err, row) { 
     files.push(row.name) 
    }); 
    return files; 
    } 

    close() { 
    this.db.close(); 
    } 
} 

,하지만 난 항상 모듈을 찾을 수 없다는 오류가 발생합니다 : 그것은 다음과 같습니다. vue-electron 프로젝트에서 모듈을 만들고 가져 오는 올바른 방법은 무엇입니까?

Answer 1

내 데이터베이스 라이브러리를 트리의 src/render 부분에 두는 정산이 끝났습니다.

ITS의 <script> 섹션에서 다음이 src/renderer/components/Tagger.vue에서 구성 요소 그리고

Database = require('better-sqlite3') 

class TagDB 

    constructor: (dbFile) -> 
    @db = new Database(dbFile) 
    console.log("Opened Database #{dbFile}") 

    tags: -> 
    @db.prepare("SELECT id,tag FROM tags").all().map((row) => row.tag) 

    files: -> 
    @db.prepare("SELECT id,name FROM files").all() 

    close: -> 
    @db.close() 

export default TagDB 

내가 가진 : 내 src/renderer/database.coffee는 다음을 닮은 마지막

<script> 
    import TagDB from '../database' 
    var tagdb = new TagDB('/tmp/tagster.tmp.sqlite3') 
    ... 
    ... 

그리고 내가 .electron-vue/webpack.renderer.config.js에 다음과 같은 추가 내가 컴파일 할 수있는 내 coffeescript :

module: { 
    rules: [ 
     { 
     test: /\.coffee$/, 
     use: 'coffeescript-loader' 
     }, 
    ... 
    ... 
    extensions: ['.js', '.vue', '.json', '.css', '.node', '.coffee']