Изучение опции Define в Angular CLI: замена глобальных идентификаторов

В постоянно развивающемся мире веб-разработки Angular CLI продолжает дарить разработчикам новые возможности и улучшения. Одно из таких дополнений — опция define, представленная в версии 17.2.0-rc.0 в файле конфигурации angular.json, предлагая мощный инструмент для замены глобальных идентификаторов во время сборки. Давайте посмотрим, как эта функциональность может улучшить ваши проекты на Angular.

Введение опции define

Опция define в Angular CLI позволяет разработчикам заменять глобальные идентификаторы в своем коде на альтернативные значения во время сборки. Эта функциональность аналогична DefinePlugin в Webpack, обеспечивая плавный переход для тех, кто знаком с настройками пользовательского Webpack. Более того, она имеет сходство с опцией esbuild с тем же именем, расширяя свои возможности на экосистему Angular.

Синтаксис

В файле конфигурации angular.json опция defineпредставлена в виде объекта. Каждая пара ключ-значение соответствует глобальному идентификатору и его соответствующему значению замены. Например:

{
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"configurations": {
"production": {
"define": {
"DEBUG": "false" //
}
},
"development": {
"define": {
"DEBUG": "true" //
}
}
},
"defaultConfiguration": "production"
}
}
}

Все значения замены указываются в виде строк в файле конфигурации. Для обозначения строкового литерала заключите значение в одинарные кавычки. Эта гибкость позволяет использовать широкий спектр замен, включая различные идентификаторы или любой допустимый тип JSON.

А что с Typescript?
Для обеспечения беспрепятственной интеграции с TypeScript нам предстоит указать тип модуля для импортов. Это позволяет избежать ошибок проверки типов во время процесса сборки. Включив файл определения типов (например, src/types.d.ts) в исходный код приложения, разработчики могут объявить заменяемые идентификаторы и соответствующие им типы:

@Component({
selector: 'app-foo',
standalone: true,
})
export class FooComponent {
constructor() {
// tree shakeable when it's false
if (DEBUG) {
console.log('Debug mode enabled');
}
}
}

Ограничения и соображения

Важно отметить, что опция define не применяется к значениям в метаданных Angular, таким как декораторы Component или Directive. Это ограничение сохраняется с предыдущих интеграций сторонних средств сборки. Разработчики должны помнить об этом при планировании архитектуры своего проекта и избегать использования define в таких сценариях.

Больше материалов с хорошей подсветкой синтаксиса в моем блоге на teletype