在 vue-electron 组件之间加载共享的 Javascript 代码答案

【问题标题】：Loading shared Javascript code between vue-electron components在 vue-electron 组件之间加载共享的 Javascript 代码
【发布时间】：2018-05-20 17:58:29
【问题描述】：

我使用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。它看起来像这样：

"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();
  }
}

我尝试将它放在src 和src/main 中，并尝试使用var db = requrie('database') 和var db = require('src/main/database') 以及其他几个变体导入它，但我总是收到找不到模块的错误。在 vue-electron 项目中构建和导入模块的正确方法是什么？

【问题讨论】：

标签： javascript vue.js electron es6-modules

【解决方案1】：

我最终决定将我的数据库库放在树的src/render 部分。我的src/renderer/database.coffee 如下所示：

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/components/Tagger.vue 有一个组件，它的<script> 部分有以下内容：

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

最后我在.electron-vue/webpack.renderer.config.js 中添加了以下内容，这样我就可以编译我的咖啡脚本了：

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

【讨论】：