node.js - Electron/Angular2/打字应用程序 : Import module in a component

Question

我对 Typescript 和 Angular2 真的很陌生。这一天，我尝试使用 Angular2、Webpack 和 Typings Node 模块在 Electron 上运行一个应用程序。问题是，每次我在互联网上找到示例时，电子都会被电子预构建加载为 Node 模块。我想要的是能够将电子导入到任何组件，以便能够从该组件更新我的应用程序。

我尝试使用typings Node 模块从DefinitelyTyped添加github-electron.d.ts，将其导入到我的组件中，如下所示:

 import electron = require('electron')

但是当我启动应用程序时(而不是在构建期间)，我遇到了问题

   Module not found: Error: Cannot resolve module 'electron' in /home/stephane/workspace/hacker-keyboard/app
resolve module electron in /home/xxx/app
   looking for modules in /home/xxx/node_modules

有人有这种架构的例子或者知道错误是什么吗？

我的配置:

树:

├── app
│   ├── app.ts
│   ├── index.html
│   ├── main.js
│   └── package.json
├── build
│   ├── angular2.js
│   ├── angular2.js.map
│   ├── app.js
│   ├── app.js.map
│   ├── common.js
│   ├── common.js.map
│   ├── electron.js
│   └── electron.js.map
├── node_modules
│   ├── angular2
│   ├── bootstrap
│   ├── electron-prebuilt
│   ├── es6-promise
│   ├── es6-shim
│   ├── gulp
│   ├── reflect-metadata
│   ├── rxjs
│   ├── ts-loader
│   ├── typescript
│   ├── typings
│   ├── webpack
│   ├── webpack-dev-server
│   └── zone.js
├── typings
│   ├── browser
│   │   └── ambient
│   │       └── github-electron
│   │           └── github-electron.d.ts
│   ├── browser.d.ts
│   ├── main
│   │   └── ambient
│   │       └── github-electron
│   │           └── github-electron.d.ts
│   └── main.d.ts
├── package.json
├── readme.md
├── tsconfig.json
└── webpack.config.js

配置文件:

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true
  },
  "files": [
    "app/app.ts",
    "typings/main.d.ts"
  ]
}

webpack.config.js

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

module.exports = {
  devtool: 'source-map',
  debug: true,

  entry: {
    'angular2': [
      'rxjs',
      'reflect-metadata',
      'angular2/core',
      'angular2/router',
      'angular2/http'
    ],
    'app': './app/app'
  },

  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',
        exclude: [ /node_modules/ ]
      }
    ]
  },

  plugins: [
    new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }),
    new CommonsChunkPlugin({ name: 'common',   filename: 'common.js' })
  ],
  target:'node-webkit'
};

package.json

{
  "name": "image-size-calculator",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --progress --profile --colors --display-error-details --display-cached",
    "watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached",
    "electron": "electron app"
  },
  "author": "Auth0",
  "license": "MIT",
  "devDependencies": {
    "electron-prebuilt": "^0.35.4",
    "es6-shim": "^0.34.0",
    "ts-loader": "^0.7.2",
    "typescript": "^1.7.3",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.2",
    "bootstrap": "^3.3.6",
    "es6-shim": "^0.33.3",
    "gulp": "^3.9.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "typings": "^0.6.8",
    "zone.js": "^0.5.10"
  }
}

Answer 1

你需要改变 目标:'node-webkit' target: 'electron-renderer' 在你的 webpack.config.js 中，之后 webpack 能够在我的应用程序中找到 Electron