使用 webpack 将 javascript 类（如模块节点）导出/导入到电子中

Question

在基本的 Electon-vue 应用程序的上下文中，我想创建自己的 javascript 类并将其用于主进程或渲染器或 vue 组件。

我创建了 JS 类，但我从来没有找到导出我的类的好方法。

所有在网络上编写导入/导出模块的可能性都由相同的错误完成：未定义的导出

"use strict"

import fs from 'fs'
import typeorm from 'typeorm'
import Public from './../entity/Public'

class ConnectionManager
{
    constructor(){}

    getConnection(type, name, options) {

    }
}

module.exports = ConnectionManager

但是看起来其他 js 文件可以像 vue-router js 一样完美地工作，用于路由到 vue.js 应用程序：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: require('@/components/Home').default
    }
]
})

我用 Webpack 和 libraryTarget 打包我的代码输出是：commonjs2

我似乎将 babel-loader 与 webpack 一起使用

节点版本：10.13.0

电子：3.0.10

通天塔：6

编辑：

我试试这个语法类 js 文件：

"use strict"

import * as fs from 'fs'
import * as typeorm from 'typeorm'
import {Public} from './../entity/Public'

export default class ConnectionManager
{
    constructor(){}

    getConnection(type, name, options) {

    }
}

使用此导入语法：

import ConnectionManager from './../service/connectionManager'

但是当我在电子中执行代码时出现此错误：

未捕获的类型错误： _service_connectionManager__WEBPACK_IMPORTED_MODULE_8__.default.getConnection 不是函数

我在控制台记录了这个服务类“ConnectionManager”，我得到了这个结果（所以它确实存在）：

ƒ ConnectionManager() {
    babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, ConnectionManager);
}

貌似最终的js模块webpack包含ConnectionManager类

Answer 1

看来你把 commonjs 模块和 ES 模块混用的方式不对。

有很多模块（包括内置节点）没有default export。要import 这样的模块，您需要在导入语句中使用* as moduleAlias 或{ exportedField }。尝试用这种方式重写你的代码：

import * as fs from 'fs'
import * as typeorm from 'typeorm'
import { Public } from '../entity/Public'

export default class ConnectionManager
{
    constructor(){}

    getConnection(type, name, options) {

    }
}

因为这个类是exported作为默认值，你可以使用下面的构造将import它作为默认字段，其中ConnectionManager是当前作用域的别名：

import ConnectionManager from '../service/connectionManager'