2017-07-22 72 views
0

我有一箇舊項目,並將其移動到具有不同節點,npm版本的新機器上,並開始努力爭取編譯完成。我確實爲我的所有依賴關係進行了npm軟件包升級,它更新了我的webpack配置,這幾乎在所有事情都宣佈破產時就已經完成了。我試圖'升級'我的配置 - 現在看起來在語法上是正確的 - 但是構建沒有完成 - 這是我的目標!幫幫我!angular2電子項目失敗的Webpack問題

節點版本= v6.11.1 NPM版本= 3.10.10

目前的問題我有是,當我運行NPM運行腳本(運行下面的命令webpack --progress --profile --colors --display-error-details --display-cached)我碰到下面的錯誤輸出:

npm run build 

> [email protected] build /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit 
> webpack --progress --profile --colors --display-error-details --display-cached 

12% building modules 18/166 modules 148 active ...e_modules/rxjs/add/operator/zipAll.jsts-loader: Using [email protected] and /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/tsconfig.json 
6403ms building modules                 
18ms sealing 
1ms optimizing 
0ms basic module optimization 
8ms module optimization 
1ms advanced module optimization 
0ms basic chunk optimization 
0ms chunk optimization 
0ms advanced chunk optimization 
0ms module and chunk tree optimization 
0ms chunk modules optimization 
0ms advanced chunk modules optimization 
9ms module reviving 
5ms module order optimization 
4ms module id optimization 
3ms chunk reviving 
2ms chunk order optimization 
14ms chunk id optimization 
57ms hashing 
0ms module assets processing 
99ms chunk assets processing 
21ms additional chunk assets processing 
0ms recording 
0ms additional asset processing 
4022ms chunk asset optimization 
862ms asset optimization 
87ms emitting 
Hash: 64818392d721d165376d 
Version: webpack 3.3.0 
Time: 11633ms 
      Asset  Size Chunks     Chunk Names 
     app.js 3.48 MB  0 [emitted] [big] app 
    @angular.js 856 kB  1 [emitted] [big] @angular 
     common.js 140 kB  2 [emitted]   common 
    app.js.map 4.26 MB  0 [emitted]   app 
@angular.js.map 1.05 MB  1 [emitted]   @angular 
    common.js.map 166 kB  2 [emitted]   common 
    [34] external "fs" 42 bytes {0} {1} [not cacheable] 
     [] -> factory:1ms building:0ms = 1ms 
[394] ./src/app/services/ftp-service/index.ts 168 bytes {0} [built] 
     [] -> factory:284ms building:297ms = 581ms 
[400] ./src/app/services/ssh-service/index.ts 168 bytes {0} [built] 
     [] -> factory:285ms building:314ms = 599ms 
[426] multi rxjs reflect-metadata zone.js 52 bytes {1} [built] 
     factory:1ms building:2ms = 3ms 
[429] multi es6-shim 28 bytes {2} [built] 
     factory:0ms building:0ms = 0ms 
[431] ./src/app/app.ts 293 bytes {0} [built] 
     factory:344ms building:3392ms = 3736ms 
[434] ./src/app/app.module.ts 2.96 kB {0} [built] 
     [] -> factory:157ms building:176ms = 333ms 
[435] ./src/app/app.component.ts 1.41 kB {0} [built] 
     [] -> factory:215ms building:90ms dependencies:262ms = 567ms 
[438] ./src/app/page-1/page.1.component.ts 1.08 kB {0} [built] 
     [] -> factory:249ms building:101ms dependencies:217ms = 567ms 
[441] ./src/app/server-browser/server.browser.component.ts 3.16 kB {0} [built] 
     [] -> factory:250ms building:184ms dependencies:133ms = 567ms 
[469] ./src/app/api-browser/api.browser.component.ts 4.16 kB {0} [built] 
     [] -> factory:250ms building:159ms dependencies:158ms = 567ms 
[583] ./src/app/api-detail/index.ts 195 bytes {0} [built] 
     [] -> factory:280ms building:276ms = 556ms 
[587] ./src/app/api-list/index.ts 185 bytes {0} [built] 
     [] -> factory:280ms building:280ms = 560ms 
[591] ./src/app/settings/settings.component.ts 3.92 kB {0} [built] 
     [] -> factory:251ms building:205ms dependencies:111ms = 567ms 
[594] ./src/app/server-details/index.ts 215 bytes {0} [built] 
     [] -> factory:280ms building:286ms = 566ms 
    + 585 hidden modules 

ERROR in /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/node_modules/@types/node/index.d.ts 
(60,14): error TS2687: All declarations of 'iterator' must have identical modifiers. 

ERROR in /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/src/customDefinitions.d.ts 
(1,15): error TS2300: Duplicate identifier 'Notification'. 

npm ERR! Darwin 16.7.0 
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build" 
npm ERR! node v6.11.1 
npm ERR! npm v3.10.10 
npm ERR! code ELIFECYCLE 
npm ERR! [email protected] build: `webpack --progress --profile --colors --display-error-details --display-cached` 
npm ERR! Exit status 2 
npm ERR! 
npm ERR! Failed at the [email protected] build script 'webpack --progress --profile --colors --display-error-details --display-cached'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the ConnectToolkit package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  webpack --progress --profile --colors --display-error-details --display-cached 
npm ERR! You can get information on how to open an issue for this project with: 
npm ERR!  npm bugs ConnectToolkit 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR!  npm owner ls ConnectToolkit 
npm ERR! There is likely additional logging output above. 

npm ERR! Please include the following file with any support request: 
npm ERR!  /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/npm-debug.log 

它似乎相當遠 - 但以我不明白的方式失敗。

ERROR in /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/node_modules/@types/node/index.d.ts 
    (60,14): error TS2687: All declarations of 'iterator' must have identical modifiers. 

    ERROR in /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/src/customDefinitions.d.ts 
    (1,15): error TS2300: Duplicate identifier 'Notification'. 

的src/CustomDefinition.ts包含:

declare class Notification { 
    constructor(title: string, options?: Object) 
} 

我webpack.config.js目前看起來如下:

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

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

    entry: { 
    '@angular': [ 
     'rxjs', 
     'reflect-metadata', 
     'zone.js' 
    ], 
    'common': ['es6-shim'], 
    'app': './src/app/app.ts' 
    }, 

    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/, /releases/ ] 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json-loader' 
     }, 
     { 
     test: /\.(css|html)$/, 
     loader: 'raw-loader' 
     }, 
     { 
     test: /\.(png|jpg)$/, 
     loader: 'url?limit=10000' 
     } 
    ] 
    }, 

plugins: [ 
      new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows 
      /angular(\\|\/)core(\\|\/)@angular/, 
      helpers.root('./src'), // location of your src 
      {} // a map of your routes 
     ), 

new webpack.LoaderOptionsPlugin({ 
options : { 
      htmlLoader : { 
       minimize : false 
        } 
    } 
    }) 


], 
target:'electron-renderer' 
}; 

這很可能是不正確的,因爲我沒有真正的想法我正在用webpack做什麼!請幫忙!錯誤說成包括NPM-日誌,所以我已經包括在這裏:

0 info it worked if it ends with ok 
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ] 
2 info using [email protected] 
3 info using [email protected] 
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 
5 info lifecycle [email protected]~prebuild: [email protected] 
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing 
7 info lifecycle [email protected]~build: [email protected] 
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true 
9 verbose lifecycle [email protected]~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/node_modules/.bin:/Users/andy.armstronguk.ibm.com/.rvm/gems/ruby-2.4.1/bin:/Users/andy.armstronguk.ibm.com/.rvm/gems/[email protected]/bin:/Users/andy.armstronguk.ibm.com/.rvm/rubies/ruby-2.4.1/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/andy.armstronguk.ibm.com/.rvm/bin 
10 verbose lifecycle [email protected]~build: CWD: /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit 
11 silly lifecycle [email protected]~build: Args: [ '-c', 
11 silly lifecycle 'webpack --progress --profile --colors --display-error-details --display-cached' ] 
12 silly lifecycle [email protected]~build: Returned: code: 2 signal: null 
13 info lifecycle [email protected]~build: Failed to exec build script 
14 verbose stack Error: [email protected] build: `webpack --progress --profile --colors --display-error-details --display-cached` 
14 verbose stack Exit status 2 
14 verbose stack  at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16) 
14 verbose stack  at emitTwo (events.js:106:13) 
14 verbose stack  at EventEmitter.emit (events.js:191:7) 
14 verbose stack  at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14) 
14 verbose stack  at emitTwo (events.js:106:13) 
14 verbose stack  at ChildProcess.emit (events.js:191:7) 
14 verbose stack  at maybeClose (internal/child_process.js:891:16) 
14 verbose stack  at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5) 
15 verbose pkgid [email protected] 
16 verbose cwd /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit 
17 error Darwin 16.7.0 
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build" 
19 error node v6.11.1 
20 error npm v3.10.10 
21 error code ELIFECYCLE 
22 error [email protected] build: `webpack --progress --profile --colors --display-error-details --display-cached` 
22 error Exit status 2 
23 error Failed at the [email protected] build script 'webpack --progress --profile --colors --display-error-details --display-cached'. 
23 error Make sure you have the latest version of node.js and npm installed. 
23 error If you do, this is most likely a problem with the ConnectToolkit package, 
23 error not with npm itself. 
23 error Tell the author that this fails on your system: 
23 error  webpack --progress --profile --colors --display-error-details --display-cached 
23 error You can get information on how to open an issue for this project with: 
23 error  npm bugs ConnectToolkit 
23 error Or if that isn't available, you can get their info via: 
23 error  npm owner ls ConnectToolkit 
23 error There is likely additional logging output above. 
24 verbose exit [ 1, true ] 

我想這可能是有用的,包括我的package.json這是如下(最近更新"@types/core-js": "^0.9.34""@types/core-js": "0.9.35"其固定一大堆在生成過程中錯誤):

{ 
    "name": "ConnectToolkit", 
    "version": "0.0.1", 
    "description": "myapp", 
    "main": "main.js", 
    "scripts": { 
    "start": "electron main.js", 
    "build": "webpack --progress --profile --colors --display-error-details --display-cached", 
    "watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached", 
    "distribute": "electron-packager . Electrogram --platform=darwin --arch=x64 --out=releases/ --overwrite --icon=src/assets/images/electrogram --asar" 
    }, 
    "author": "Andy Armstrong", 
    "license": "See Licence.txt ", 
    "devDependencies": { 
    "@types/core-js": "0.9.35", 
    "@types/hammerjs": "^2.0.33", 
    "@types/jasmine": "^2.5.37", 
    "@types/node": "^8.0.14", 
    "@types/selenium-webdriver": "^3.0.4", 
    "@types/webpack": "^3.0.4", 
    "@types/zone.js": "0.5.12", 
    "css-loader": "^0.28.4", 
    "electron": "^1.4.5", 
    "electron-packager": "^8.2.0", 
    "electron-prebuilt": "^1.4.5", 
    "electron-rebuild": "^1.5.11", 
    "electron-reload": "^1.0.2", 
    "file-loader": "^0.11.2", 
    "json-loader": "^0.5.4", 
    "raw-loader": "^0.5.1", 
    "ts-loader": "^2.3.1", 
    "typescript": "^2.0.6", 
    "uglify-js": "^3.0.25", 
    "url-loader": "^0.5.7", 
    "webpack": "^3.3.0" 
    }, 
    "dependencies": { 
    "@angular/common": "^4.3.1", 
    "@angular/compiler": "^4.3.1", 
    "@angular/core": "^4.3.1", 
    "@angular/platform-browser": "^4.3.1", 
    "@angular/platform-browser-dynamic": "^4.3.1", 
    "@angular/router": "^4.3.1", 
    "electron-window-state": "^4.1.1", 
    "es6-shim": "^0.35.1", 
    "ftp": "^0.3.10", 
    "jquery": "^3.1.1", 
    "material-design-lite": "^1.2.1", 
    "ng2-popover": "0.0.14", 
    "node-persist": "^2.0.7", 
    "open": "0.0.5", 
    "reflect-metadata": "^0.1.8", 
    "rxjs": "5.4.2", 
    "ssh2": "^0.5.4", 
    "systemjs": "^0.20.15", 
    "xml2js": "^0.4.17", 
    "zone.js": "^0.8.14" 
    } 
} 

我tsconfig.json文件看起來像:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "sourceMap": true, 
    "typeRoots": [ 
     "node_modules/@types" 
    ] 
    }, 
    "exclude": [ 
    "node_modules", 
    "releases" 
    ], 
    "filesGlob": [ 
    "./src/customDefinitions.d.ts", 
    "./src/app/**/*.ts", 
    "!./node_modules/**/*.ts", 
    "typings/index.d.ts" 
    ], 
    "awesomeTypescriptLoaderOptions": { 
    "resolveGlobs": true, 
    "forkChecker": true 
    }, 
    "compileOnSave": true, 
    "buildOnSave": true 
} 

請任何人都可以在強勁的WebPack,電子, angular2 - 看看並幫助我。

回答

1

該固定通過將:

"lib":["es6","dom"] 

相應的TSconfig編譯器選項。這使我的tsconfig.json文件看起來像這樣:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "sourceMap": true, 
    "lib":["es6","dom"], 
    "typeRoots": [ 
     "node_modules/@types" 
    ] 
    }, 
    "exclude": [ 
    "node_modules", 
    "releases" 
    ], 
    "filesGlob": [ 
    "./src/customDefinitions.d.ts", 
    "./src/app/**/*.ts", 
    "!./node_modules/**/*.ts", 
    "typings/index.d.ts" 
    ], 
    "awesomeTypescriptLoaderOptions": { 
    "resolveGlobs": true, 
    "forkChecker": true 
    }, 
    "compileOnSave": true, 
    "buildOnSave": true 
}