Angular 4中.ts文件多变量批量导出及全局配置优化方法

一、Node.js（CommonJS）环境下的简化导出方式 #

如果你现在用的是module.exports.key = "值"这种方式，要导出20-30个值确实挺繁琐的。其实你可以把所有配置项打包成一个对象，一次性导出整个对象，彻底告别重复写module.exports：

// config.js
const appConfig = {
  apiKey: "My API key",
  baseUrl: "https://example.com/api",
  timeout: 5000,
  // 剩下的20多个配置项都放在这里就行
};

// 一次性导出整个配置对象
module.exports = appConfig;

导入使用方式 #

你可以选择整体导入后按需取用，或者用解构语法直接拿到需要的变量，怎么方便怎么来：

// 方式1：整体导入
const config = require('./config');
console.log(config.apiKey);

// 方式2：解构导入（更灵活，只拿需要的）
const { apiKey, baseUrl } = require('./config');
console.log(apiKey);

二、Angular 4（TypeScript/ES模块）中的多变量导出与导入 #

Angular 4基于TypeScript，用的是ES模块的导出导入语法，同样有几种简洁的方式处理多变量导出：

方式1：逐个导出变量，批量导入 #

直接给每个变量加上export关键字，导入时按需挑选需要的变量就行：

// config.ts
export const apiKey = "My Angular API key";
export const appTitle = "My Angular App";
export const themeColor = "#2196F3";
// 其他配置变量依次加上export导出

导入使用

// 在组件或服务中导入
import { apiKey, appTitle } from './config';

// 直接用变量就行
console.log(appTitle);

方式2：打包成对象统一导出 #

和Node.js的思路类似，把所有配置放到一个对象里，然后导出这个对象（支持默认导出或命名导出两种方式）：

// config.ts
const appConfig = {
  apiKey: "My Angular API key",
  appTitle: "My Angular App",
  themeColor: "#2196F3",
  // 其他配置项都放这里
};

// 方式A：默认导出
export default appConfig;

// 方式B：命名导出（也可以用这种）
// export const appConfig = { ... };

导入使用

如果是默认导出：

import appConfig from './config';
console.log(appConfig.themeColor);

如果是命名导出：

import { appConfig } from './config';
// 或者直接解构导入需要的属性
import { appConfig: { apiKey, themeColor } } from './config';

额外小提示（Angular专属） #

如果是全局配置，Angular更推荐用依赖注入的方式管理，比如创建一个ConfigService，或者使用InjectionToken来注入配置值，这样更符合Angular的架构风格，也方便在不同组件/服务中统一维护。不过如果只是简单的静态变量导出，上面的ES模块方式完全够用。

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