1
我对typescript和Angular2非常陌生。我一直试图通过Angular2，Webpack和Typings节点模块在电子上运行应用程序。问题在于，每当我在互联网上找到例子，电子作为节点模块被电子预装载。我想要的是能够将电子导入任何组件，以便能够从此组件更新我的应用程序。Electron/Angular2/Typings App：组件中的导入模块
我试图用分型节点模块从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"
}
}