2016-09-21 42 views
0

我需要部署一個angularjs應用程序。如何在heroku上使用uglify後使用webpack部署angularjs應用程序

我使用webpack來uglify製作應用程序後。下面的命令出現了。

的應用程序,當我運行的WebPack-DEV-服務器

Hash: 06f0e2d056b597c4e43f 
Version: webpack 1.13.2 
Time: 16533ms 
    Asset  Size Chunks    Chunk Names 
bundle.js 4.37 MB  0 [emitted] main 
    [0] multi main 28 bytes {0} [built] 
    [13] ./src/index.js 2.69 kB {0} [built] 
    + 12 hidden modules 

WARNING in bundle.js from UglifyJs 
Side effects in initialization of unused variable $element [./~/angular/angular.js:9552,0] 
Dropping unreachable code [./~/angular/angular.js:20263,0] 
Dropping unused variable expression [./~/angular/angular.js:15347,0] 
Dropping unused function includes [./~/angular/angular.js:799,0] 
Dropping unused function nodesetLinkingFn [./~/angular/angular.js:10162,0] 
Dropping unused function directiveLinkingFn [./~/angular/angular.js:10169,0] 
Side effects in initialization of unused variable check [./~/markdown/lib/markdown.js:1044,0] 
Dropping unused variable lines [./~/markdown/lib/markdown.js:350,0] 
Dropping unused variable number_list [./~/markdown/lib/markdown.js:427,0] 
Side effects in initialization of unused variable old_tree [./~/markdown/lib/markdown.js:705,0] 
Dropping unused variable lastIndex [./~/markdown/lib/markdown.js:775,0] 
Condition always false [./~/markdown/lib/markdown.js:1718,0] 
Dropping unreachable code [./~/markdown/lib/markdown.js:1720,0] 

但是當我嘗試運行變醜生產應用程序,同樣的錯誤不斷彈出工作正常。 (見下文)

我跑的命令是node ./src/bundle.js(輸出後變醜)

C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:21 
O=x||k;else{O=x||S,_=[];for(var V in o)Nr.call(o,V)&&"$"!==V.charAt(0)&&_.push(V)}for(w=_.length,T=new Array(w),f=0;f<w;f++)if(C=o===_?f:_[f],E=o[C],A=O(C,E,f),$[A])M=$[A],delete $[A],I[A]=M,T[f]=M;else{if(I[A])throw r(T,function(e){e&&e.scope&&($[e.id]=e)}),s("dupes","Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}",h,A,E);T[f]={id:A,scope:void 0,clone:void 0},I[A]=!0}for(var D in $){if(M=$[D],N=pe(M.clone),i.leave(N),N[0].parentNode)for(f=0,v=N.length;f<v;f++)N[f][a]=!0;M.scope.$destroy()}for(f=0;f<w;f++)if(C=o===_?f:_[f],E=o[C],M=T[f],M.scope){g=j;do g=g.nextSibling;while(g&&g[a]);c(M)!=g&&i.move(pe(M.clone),null,j),j=l(M),u(M.scope,f,y,E,b,C,w)}else d(function(e,t){M.scope=t;var n=p.cloneNode(!1);e[e.length++]=n,i.enter(e,null,j),j=n,M.clone=e,I[M.id]=M,u(M.scope,f,y,E,b,C,w)});$=I})}}}}],Ua="ng-hide",Fa="ng-hide-animate",qa=["$animate" 

ReferenceError: window is not defined 
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:21:8320) 
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169) 
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:21:8704) 
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169) 
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:22:1478) 
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169) 
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:289) 
    at t (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:169) 
    at C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:256 
    at Object.<anonymous> (C:\Users\User\Desktop\udemy\Website\AngularJS\Leadiq\src\bundle.js:1:261) 

我的GitHub庫是通過此鏈接Github repo有人可以提供幫助和建議?

回答

0

如果您的web應用程序可以在webpack-dev-server上運行,只要您的代碼可以在uglification(uglify plugin)下運行。您所需要的只是設置您自己的迷你服務器,以呈現靜態/動態資產。

我會從node.js和npm方法來解釋。

如果您正在部署到heroku,則需要使用2個腳本postinstallstartpostinstall基本上意味着您將執行webpack -p任務,根據您的webpack.config.js將所有js文件生成爲一個捆綁文件。 start將觸發微型服務器呈現Web應用程序。

使用git push heroku master將代碼推送到heroku master後,這兩個命令將自動在heroku上運行。 npm run postinstall將首先運行npm start

不要在任何形式的部署中使用webpack-dev-server。

請參閱我的github回購更多細節。

Github repo

相關問題