Angular中是否存在#define？如何实现编译期宏定义代码管控功能？

Great question! Angular本身并没有像C++、C#那样原生的#define语法，但完全可以借助Angular生态和底层工具链实现编译阶段基于宏定义添加/移除代码的效果，下面是几种常用的官方推荐方案：

1. 利用Angular环境文件（最贴合Angular生态） #

Angular CLI默认提供了环境文件机制，这是实现类似宏定义最直观的方式。你可以在不同环境（开发/生产/自定义环境）的配置文件中定义开关，编译时Angular会自动替换对应环境的文件，Tree-Shaking还会把未使用的代码彻底剔除。

示例： #

• 开发环境配置（src/environments/environment.ts）：

export const environment = {
  production: false,
  enableDebugTools: true,
  showBetaFeature: true
};

• 生产环境配置（src/environments/environment.prod.ts）：

export const environment = {
  production: true,
  enableDebugTools: false,
  showBetaFeature: false
};

• 业务代码中使用：

import { environment } from './environments/environment';

// 这段代码只有在enableDebugTools为true时才会被编译打包
if (environment.enableDebugTools) {
  console.log('调试工具已启用');
  // 这里可以添加调试相关的组件、逻辑
}

// Beta功能仅在开发环境可见
@Component({
  template: `
    <main-content></main-content>
    ${environment.showBetaFeature ? '<beta-module></beta-module>' : ''}
  `
})
export class AppComponent {}

2. 使用Webpack的DefinePlugin（更灵活的全局宏） #

如果需要全局范围内的"宏定义"（不需要导入环境文件），可以借助Angular底层使用的Webpack的DefinePlugin插件，它能在编译阶段直接替换代码中的变量，未使用的分支会被Tree-Shaking移除。

示例： #

1. 首先在项目根目录创建webpack.config.js（如果没有的话），或者修改Angular CLI的自定义webpack配置（需要@angular-builders/custom-webpack）：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      // 注意：值需要是字符串或JSON格式，布尔值要写成'"true"'或者'false'
      ENABLE_FEATURE_X: JSON.stringify(true),
      APP_VERSION: JSON.stringify('1.0.0')
    })
  ]
};

2. 在angular.json中配置使用自定义webpack：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      }
      // 其他原有配置...
    }
  }
}

3. 在TypeScript代码中使用（需要先声明全局变量避免类型报错）：

// 在src/typings.d.ts中添加声明
declare const ENABLE_FEATURE_X: boolean;
declare const APP_VERSION: string;

// 业务代码中直接使用
if (ENABLE_FEATURE_X) {
  console.log(`Feature X enabled in version ${APP_VERSION}`);
}

总结 #

虽然Angular没有原生的#define语法，但通过上面两种方案，完全可以实现和C++/C#宏定义一致的编译阶段代码裁剪效果，而且都是官方生态支持的稳定方案，推荐优先使用环境文件机制，全局宏场景再考虑DefinePlugin。

内容的提问来源于stack exchange，提问作者Deerjon