条件环境变量 tree-shaking答案

【问题标题】：Conditional environment variables tree-shaking条件环境变量 tree-shaking
【发布时间】：2019-08-16 17:25:46
【问题描述】：

目前我正在尝试根据环境变量删除未使用的代码。在下面的代码中，当我运行ng build --prod 并在environment.prod.ts 中设置evironment.showDevTools = false 时，我希望console.log 不会包含在最终的构建文件中，但不幸的是它是。我做错了什么？

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

if (environment.showDevTools) {
  console.log('showing dev-tools');
}

@Component({
  selector: 'app-component',
  templateUrl: './app.html',
  styleUrls: ['app.scss']
})
export class AppComponent {

}

main.js 的一部分

,ut=n("AytR");ut.a.showDevTools&&console.log("showing dev-tools");var st=function(){

【问题讨论】：

标签： javascript angular typescript tree-shaking

【解决方案1】：

我必须在package.json 中添加一个名为"sideEffects": false 的字段。所以它目前看起来像这样：

{
  "name": "myApp",
  "version": "1.0.0",
  "sideEffects": false,
  "scripts": {
    "ng": "ng",
    "test": "ng test",
    ...
  },
}

参考：https://webpack.js.org/guides/tree-shaking/、https://github.com/stereobooster/package.json#sideeffects

【讨论】：