如何创建constant.ts文件以声明并导出所有全局常量

不需要特殊的脚手架命令，两种常用创建方式如下：

• 手动创建：在项目对应目录下直接新建文件，命名为constant.ts即可
• 终端命令创建：
  • macOS/Linux 环境：执行 touch constant.ts
  • Windows 环境：cmd执行type nul > constant.ts，PowerShell执行ni constant.ts

方案1：按需导出（推荐大多数场景使用） #

每个常量声明时直接加export前缀，后续可以按需引入对应的常量，方便tree-shaking优化打包体积：

// constant.ts内容示例
// 全局接口基础地址
export const BASE_API_URL = 'https://api.yourdomain.com'
// 接口请求超时时间（单位ms）
export const REQ_TIMEOUT = 15000
// 分页默认每页条数
export const DEFAULT_PAGE_SIZE = 20
// 全局静态资源基础路径
export const STATIC_BASE_URL = 'https://static.yourdomain.com'

引入使用示例：

import { BASE_API_URL, DEFAULT_PAGE_SIZE } from './constant'

方案2：默认导出整个常量对象 #

适合常量数量多、需要按模块归类的场景，所有常量统一挂载到一个对象上导出：

// constant.ts内容示例
const BASE_API_URL = 'https://api.yourdomain.com'
const REQ_TIMEOUT = 15000
const DEFAULT_PAGE_SIZE = 20
const STATIC_BASE_URL = 'https://static.yourdomain.com'

const GLOBAL_CONSTANTS = {
  BASE_API_URL,
  REQ_TIMEOUT,
  DEFAULT_PAGE_SIZE,
  STATIC_BASE_URL
}

export default GLOBAL_CONSTANTS

引入使用示例：

import GLOBAL_CONSTANTS from './constant'
// 使用时取对应属性即可
console.log(GLOBAL_CONSTANTS.BASE_API_URL)

方案3：混合导出（兼容两种使用方式） #

如果需要同时支持按需引入和全量引入两种用法，可以组合两种导出写法：

export const BASE_API_URL = 'https://api.yourdomain.com'
export const REQ_TIMEOUT = 15000
export const DEFAULT_PAGE_SIZE = 20
export const STATIC_BASE_URL = 'https://static.yourdomain.com'

export default {
  BASE_API_URL,
  REQ_TIMEOUT,
  DEFAULT_PAGE_SIZE,
  STATIC_BASE_URL
}

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