在电子角度 webpack 应用程序中导入节点模块答案

【问题标题】：import node modules in electron angular webpack app在电子角度 webpack 应用程序中导入节点模块
【发布时间】：2017-07-10 15:31:43
【问题描述】：

我有一个使用 Angular (2) 的电子应用程序，我使用 Webpack 打包它。我想在我的 Angular 组件中使用我的节点模块

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

更新：我在 webpack 配置中将目标设置为电子渲染器。现在我收到错误 error TS2693: 'Bonjour' only refer to a type, but is used as a value here

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' })
]
};

如何设置我的 Electron/Angular 应用程序，以便可以导入上述节点模块？

添加了 tsconfig：

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

【问题讨论】：

标签： javascript angularjs node.js webpack

【解决方案1】：

这个插件在其 module.exports 中导出了一个原型函数。因此插件需要像这样实例化：

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

【讨论】：