在Heroku上进行uglify后如何使用webpack部署angularjs应用 [英] how to deploy angularjs app using webpack after uglify on heroku
问题描述
我需要部署angularjs应用.
I need to deploy an angularjs app.
在我使用webpack丑化了生产应用程序之后.出现以下命令.
after I used webpack to uglify the production app. The below commands appeared.
当我运行webpack-dev-server时，该应用程序运行正常
The app is working fine when I run webpack-dev-server
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]
但是当我尝试运行丑化的生产应用程序时，同样的错误不断弹出. (请参见下文)
But when I try to run the uglified production app, the same error keeps popping up. (See below)
我运行的命令是node ./src/bundle.js(丑化后的输出)
the command I ran was node ./src/bundle.js (the output after uglified)
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存储库有人可以帮助和建议吗?
My Github repo is via this link Github repo can someone please assist and advise?
推荐答案
如果您的Web应用程序可以在webpack-dev-server上运行，只要您的代码可以在uglification(uglify插件)中幸免.您所需要做的就是设置自己的小型服务器，以呈现您的静态/动态资产.
If your web app can run on webpack-dev-server, as long as your code can survive uglification (uglify plugin). All you need is to set up your own mini server, to render your static/ dynamic assets.
我将通过node.js和npm方法进行解释.
I will explain from node.js and npm method.
如果要部署到heroku，则需要使用2个脚本postinstall和start. postinstall基本上意味着您将执行webpack -p任务，并根据webpack.config.js将所有js文件生产就绪成一个捆绑文件. start将触发小型服务器渲染Web应用.
IF you are deploying to heroku, you will need to use 2 scripts postinstall and start. postinstall basically means you will perform webpack -p task, production ready all your js files into a single bundled file based on your webpack.config.js. start will trigger the mini server to render web app.
使用git push heroku master将代码推送至heroku主站后，这两个命令都将自动在heroku上运行. npm run postinstall将首先运行，然后是npm start.
Both commands will automatically be run on heroku once you push the codes to heroku master using git push heroku master. npm run postinstall will be run first follow by npm start.
请勿将webpack-dev-server用于任何形式的部署.
DO NOT USE webpack-dev-server for any form of deployment.
请参阅我的github存储库以获取更多详细信息.
Kindly refer to my github repo for more details.
这篇关于在Heroku上进行uglify后如何使用webpack部署angularjs应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
