Приложение Electron/Angular2/Typings: импорт модуля в компонент

Я действительно новичок в машинописном тексте и Angular2. Это был день, когда я пытался запустить приложение на электроне с Angular2, Webpack и модулем узла Typings. Проблема в том, что каждый раз, когда я нахожу пример в Интернете, электрон загружается предварительной сборкой электрона в качестве модуля узла. Я хочу иметь возможность импортировать электрон в любой компонент, чтобы, например, иметь возможность обновлять свое приложение из этого компонента.

Я попытался использовать модуль узла типизации, чтобы добавить github-electron.d.ts из DefinitelyTyped, чтобы импортировать его в мой компонент следующим образом:

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

пакет.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"
  }
}

person stephanec    schedule 12.02.2016    source источник


Ответы (1)


Вам нужно изменить target: 'node-webkit' на target: 'electron-renderer' в вашем webpack.config.js, после того как этот веб-пакет смог найти электрон в моем приложении.

person Dennis Ushakov    schedule 10.06.2016