如何在Angular构建dist包时排除指定源文件？

当然可以搞定！在Angular 5项目里，你有几种实用的方法能把这个仅用于调试的HttpInterceptor从生产构建包中排除掉，下面给你一步步说清楚：

Angular自带的环境配置机制刚好能解决这个问题，通过环境标记来决定是否加载调试拦截器，生产构建时自动跳过。

• 先打开开发环境配置文件 src/environments/environment.ts，加一个启用标记：

export const environment = {
  production: false,
  enableDebugInterceptor: true // 开发环境开启动态拦截器
};

• 再打开生产环境配置文件 src/environments/environment.prod.ts，把这个标记关掉：

export const environment = {
  production: true,
  enableDebugInterceptor: false // 生产环境禁用
};

• 最后在你的模块文件（比如app.module.ts）里，根据这个标记条件注册拦截器：

import { environment } from '../environments/environment';
import { DebugInterceptor } from './debug.interceptor';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  providers: [
    // 其他必要服务
    ...(environment.enableDebugInterceptor ? 
      [{ provide: HTTP_INTERCEPTORS, useClass: DebugInterceptor, multi: true }] 
      : [])
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样执行ng build --prod时，拦截器不会被注册，再加上Angular生产构建默认开启的Tree Shaking优化，它的代码根本不会被打包进dist文件夹。

Angular 5对应的是Angular CLI 1.x版本，配置文件是.angular-cli.json，你可以直接在里面指定生产构建要排除的文件：

打开.angular-cli.json，找到apps数组里的项目配置项，添加exclude字段：

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "exclude": [
        "src/debug.interceptor.ts" // 替换成你的调试拦截器文件路径
      ]
    }
  ]
}

⚠️ 注意：这个方法要确保你的代码在生产环境下完全没有引用这个文件，否则CLI会抛出找不到模块的错误，所以配合方法一的环境变量控制会更稳妥。

如果你的场景需要更灵活的加载逻辑，可以用动态导入的方式，只在开发环境下加载拦截器：

import { environment } from '../environments/environment';
import { Injector } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

if (environment.enableDebugInterceptor) {
  import('./debug.interceptor').then(module => {
    const injector = Injector.create({
      providers: [{ provide: HTTP_INTERCEPTORS, useClass: module.DebugInterceptor, multi: true }]
    });
    // 这里可以根据需要处理拦截器的注入逻辑
  });
}

这种方式需要确保你的TypeScript配置里module选项设为esnext或commonjs，才能支持动态导入语法。

最后别忘了，每次生产构建后可以检查一下dist文件夹，确认调试拦截器的文件没有被打包进去哦！

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