UglifyJS2破坏了Angular.js应用程序中的依赖注入



我有一个Angular.js应用程序,我想缩小它。

首先,我设置了一个特定的gump管道,以便自动处理注释和缩小。

为了检查隐式注释的工作情况,我使用ngAnnotate添加了注释,然后使用严格的di选项运行应用程序,以捕获所有遗漏的注释。然后,我为我找到的所有缺失的注释添加了注释提示。在那之后,一切都很好,ngAnnotate自动注释我的代码,strict-di没有更多的警告。

然而,当我实际使用UglifyJS2缩小代码时,它无法启动应用程序,表示找不到某些服务。

这是实际的错误消息:

状态更改错误错误:[$injector:unp]未知提供程序:t提供程序<-t

如果我将mangle: false选项添加到UglifyJS2中,它可以正常工作。

--所以问题是,我如何找到罪魁祸首,为什么strict-di没有抓住它?

好的!我终于设法解决了这个问题。

我将在这里发布一个策略,帮助我有效地解决它。

战略

我有一个相当大的代码库,所有的东西都在一个JavaScript文件中。所有的依赖,第三方,以及本地的,都在其中说明,并与gulp插件捆绑在一起。

我做的第一件事是将代码拆分为两个文件:vendor.jsapplication.js。我已经将所有第三方依赖项移到第一个文件中,并将所有本地依赖项保留在第二个文件中。之后,我尝试使用缩小的application.js和未缩小的vendor.js来运行我的应用程序。这个简单的技巧帮助我确定问题实际上是由第三方代码引起的,而不是由我的应用程序引起的。

我已经指定了34个外部依赖项,所以我再次创建了两个文件vendor.jsvendor-cleared.js,并开始将依赖项从第一个移动到第二个(减半)。这一次,我已经编译了第二个,第一个没有被修改。经过几次迭代,我发现一个有问题的第三方库没有正确注释。

我已经修复了它,并在我的application.js中将所有内容重新组合起来。在那之后,我的应用程序开始完美地工作。


我希望这个简单的想法将帮助您将大型代码库转换为正确注释的代码库,并最终缩小它!

之后,只需在添加新的依赖项时检查缩小是否正常工作即可。不要忘记始终使用strict-di。它并不总是有效,但它做得相当好。

相关内容

  • 没有找到相关文章

最新更新