知向前端
angular 如何在打包发布时清除console信息
2018-5-28 Jon
问题

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));


发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容