Idiomati c Условная компиляция TypeScript в Angular - PullRequest
Новая
       27

Idiomati c Условная компиляция TypeScript в Angular

5 голосов
/ 29 февраля 2020

Я использую Angular 9, и у меня есть такой код: 

(features.ts, autogenerated:)
// AUTO-GENERTATED FILE. DO NOT EDIT!
export const Features = {
  // Whether to reveal our Secret New Feature to the world
  ENABLE_SECRET_FEATURE: 1
};

(mycode.ts, app code)
import { Features } from 'generated/features.ts';

function doSomething() {
  if (Features.ENABLE_SECRET_FEATURE) {
    doAIBlockChainARThing();
  } else {
    doSomeBoringOldCRUDThing();
  }
}

Я бы хотел, чтобы код был EITHER 

function doSomething() {
    doAIBlockChainARThing();
}

ИЛИ 

function doSomething() {
    doSomeBoringOldCRUDThing();
}

, но не оба.

Есть ли вызов ng build, который бы это сделал? Я знаю, что uglify может сделать это, и Closure Compiler, безусловно, может. Мой текущий вызов: ng build --aot=true --stats-json --buildOptimizer=true --optimization=true --prod

После некоторых экспериментов я вижу, что настройки terser в Angular сборках prod делают то, что я хочу, если у меня есть такой код: 

const SECRET_FEATURE = true;
if (SECRET_FEATURE) {
  // code here is emitted
} else {
  // code here is NOT emitted
}

Однако если я попытаюсь сделать что-то вроде: 

import {SECRET_FEATURE} from 'my-features';

if (SECRET_FEATURE) { // this conditional is emitted
  // this code is emitted
} else {
  // this code is also emitted
}

Я думаю, мне придется использовать что-то вроде https://www.npmjs.com/package/tsickle для лучшего устранения мертвого кода вместе с пользовательской конфигурацией WebPack называть это. Я надеялся на более Angular -centri c путь только для того, чтобы мне не пришлось создавать / документировать множество нестандартных машин для будущих инженеров.

Ответы [ 3 ]

2 голосов
/ 05 марта 2020

Я только что попробовал сборку проекта fre sh angular 9 с ng build --prod

С помощью следующего кода в классе компонента 

import { Features } from 'generated/features.ts';

doSomething() {
  if (Features.ENABLE_SECRET_FEATURE) {
    console.log('AAAA');
  } else {
    console.log('BBBB')();
  }
}

скомпилированный код - это то, что вы ожидаете (часть else не выдается) 

doSomething() {console.log('AAAA');}

Если в вас есть вызовы других методов if / else, это немного отличается

Например, с кодом ниже 

import { Features } from 'generated/features.ts';

   doSomething() {
    if (Features.ENABLE_SECRET_FEATURE) {
      this.doAIBlockChainARThing();
    } else {
      this.doSomeBoringOldCRUDThing();
    }
  }

  private doAIBlockChainARThing()
  {
    console.log('AAAAAAAAA');
  }

  private doSomeBoringOldCRUDThing()
  {
    console.log('BBBBB');
  }

скомпилированный код 

doSomething(){this.doAIBlockChainARThing()}
doAIBlockChainARThing(){console.log("AAAAAAAAA")}
doSomeBoringOldCRUDThing(){console.log("BBBBB")}}

Таким образом, часть else не генерируется, но неиспользуемые частные методы также не удаляются terser.

Вы можете снова использовать тест if в методе Speci c, чтобы вообще не генерировать секретный код, но это не очень удобно 

  private doAIBlockChainARThing()
  {
    if (Features.ENABLE_SECRET_FEATURE)
    console.log('AAAAAAAAA');
  }
1 голос
/ 04 марта 2020

Для изменения спецификации сборки c следует использовать Angular. json fileReplacements.

См. Связанный ответ @ ngrx / store-devtools для производственного режима

0 голосов
/ 10 марта 2020

Вы могли бы сконцентрировать свои функции в лениво загруженных компонентах Angular 9 (ivy) и дать им webpackChunkName для сопоставления и удаления из ваших файлов сборки (если вы действительно хотите, чтобы это были очень секретные функции). Затем используйте флаги своих функций, чтобы предотвратить ленивую загрузку. См. Например, https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a.

...