使用 Typescript 在 React 项目中存储/检索配置设置

Question

我目前正在使用React 进行一个项目，我使用Typescript 作为语言。在我的项目中，我安装了Webpack。一切正常，但现在，由于我们要投入生产，我希望有一种简单的方法来存储/检索config settings，例如服务器 URL（通常在开发、测试和生产阶段之间有所不同），但我被卡住了。我尝试通过添加"externals" 键来使用webpack.config.js 文件：

externals: {
  'config': JSON.stringify(process.env.ENV === 'production' ? {
    serviceUrl: "https://prod.myserver.com"
  } : {
    serviceUrl: "http://localhost:8000"
  })
} 

然后尝试从我的tsx 组件文件中引用该文件（考虑到webpack.config.js 位于根文件夹中，而我的组件位于/ClientApp/components 中）：

import config from '../../webpack.config.js';

或

import {externals} from '../../webpack.config.js';

但我收到以下错误消息：

'webpack.config.js' 被解析为 '[PROJECT_DIR]/webpack.config.js', 但 '--allowJs' 没有设置。

任何解决方案/替代方案来解决这个问题？谢谢

Answer 1

我最喜欢的解决您所描述问题的方法是使用 Webpack 的DefinePlugin：

DefinePlugin 允许您创建可以在编译 时配置的全局常量。这对于允许开发构建和发布构建之间的不同行为很有用。

在您的webpack.config.js 中，您可以创建一个全局常量，您可以像这样在应用程序代码中访问它：

new webpack.DefinePlugin({
    ENVIRONMENT: 'prod'
})

然后，在你的 TypeScript 代码中，你可以像这样访问这个常量：

declare const ENVIRONMENT: 'prod' | 'test' | 'dev' | 'etc...';
if (ENVIRONMENT === 'prod') {
    serverUrl = 'https://example.com';
} else {
    .... 
}

请注意，此方法要求您为每个环境单独构建应用程序。相反，如果您构建应用程序一次，然后将输出部署到多个环境，则可以考虑将这种配置放在一个 JSON 文件中，您可以根据每个环境进行交换。

Answer 2

import config from '../../webpack.config.js'不应该在应用程序本身中使用，它会导致不良影响（它应该被Webpack使用）并且不会提供必要的导出。

externals: { 'config': ... } 表示不存在的config 模块导出映射到指定值。

它应该像这样使用：

import * as config from 'config';

更传统的方法是 provide environment constant as a global 并在真正的 config.ts 模块中使用它。