在電子角度webpack應用程序中導入節點模塊

Question

我有一個使用Angular（2）的電子應用程序，並使用Webpack打包了它。 我想在我的Angular組件中使用我的節點模塊

import { Injectable } from '@angular/core';
import {Bonjour} from 'bonjour';

更新 ：我在我的webpack配置中將目標設置為電子渲染器。 現在我得到錯誤錯誤TS2693：“ Bonjour”僅引用一種類型，但在此處用作值

Bonjour仍然不確定。

這是我的webpack.config.js：

var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

module.exports = {
    devtool: 'source-map',
    target: 'electron-renderer',
    entry: {
        'angular': [
            'rxjs',
            'reflect-metadata',
            '@angular/core',
            '@angular/router',
            '@angular/http'
        ],


  'app': './app/main'
    },

output: {
    path: __dirname + '/build/',
    publicPath: 'build/',
    filename: '[name].js',
    sourceMapFilename: '[name].js.map',
    chunkFilename: '[id].chunk.js'
},

resolve: {
    extensions: ['.ts', '.js', '.json', '.css', '.html']
},

module: {
    loaders: [{
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: [/node_modules/]
    }]
},

plugins: [
    new CommonsChunkPlugin({ name: 'angular', filename: 'angular.js', minChunks: Infinity }),
    new CommonsChunkPlugin({ name: 'common', filename: 'common.js' })
]
};

如何設置電子/角度應用程序，以使我可以如上所述導入節點模塊？

添加了tsconfig：

{
"compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "moduleResolution": "node",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "typeRoots": [
    "../node_modules/@types"
]
},
"files": [
    "app/main.ts"
]
}

Answer 1

有問題的此插件在其module.exports中導出了原型函數。 因此，插件需要像這樣實例化：

var Bonjour = require('bonjour')
var bonjour = new Bonjour();