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));
发表评论：