angular 如何在打包发布时清除console信息

2018-5-28 一诺 js库

问题
console一般是我们开发时
用于测试打印到控制台的数据
以便我们调试程序

当项目打包上线时
这些console已然无用
这个时候还在控制台打印出来
如果打印的是一些敏感信息
就没那么安全了
并且还会影响美观

我们如果只是简单的查找代码中的console并删除
会有几个问题
1、工作量比较大(如果你使用console多的话)
2、如果你使用了一些插件,那么插件中的console删起来比较繁琐
3、如果后期想要开发环境上再次打印,则又要重复写和删

分析
那么既然我们开发环境需要而生产环境不需要
那么我们可以通过判断当前环境是开发还是生产
从而进行处理
如果是开发环境我们则不必理会
如果是生产环境则简单重写console的一些方法
使其无法打印
这样,就达到了我们的目的

解决
在@angular/cli中有个环境文件,包含了开发和生产。
environments.prod.ts   ==> 生产环境
environments.ts        ==> 开发环境
environments.prod.ts里面的
对象属性production为true
即是生产环境
environments.ts里面的
对象属性production为false
即是开发环境
而当我们使用ng build --prod 命令进行打包时
environment.prod.ts的内容会替代environment.ts的内容
也就是生产环境下打包

由于main.ts是angular程序的启动入门
所以我们只需要在这个文件里面判断是dev模式还是prod模式
如果是prod模式,我们就重写console
然后prod模式下的代码就不会打印console信息了
具体实现如下:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
// 如果是生产环境
if (environment.production) {
  enableProdMode();
  // 重写console对象的方法 去除线上代码控制台信息
  window.console.log = function(){};
  window.console.info = function(){};
  window.console.warn = function(){};
  window.console.error = function(){};
  window.console.debug = function(){};
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

标签: angular

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by emlog