Question

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

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

更新：我在webpack配置中将目标设置为电子渲染器。现在我收到错误错误TS2693：＆＃39; Bonjour＆＃39;仅指一种类型，但在此处用作值

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"
]
}

Answer 1

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

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

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

1 个答案: