Store/retrieve 使用 Typescript 在 React 项目中配置设置

Question

我目前正在 React 从事一个项目，我使用 Typescript 作为语言。在我的项目中，我安装了 Webpack。一切正常，但现在，由于我们要投入生产，我想有一个简单的方法来 store/retrieve 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' was resolved to '[PROJECT_DIR]/webpack.config.js', but '--allowJs' is not set.

任何 solution/alternative 解决这个问题？谢谢

Answer 1

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

The DefinePlugin allows you to create global constants which can be configured at compile time. This can be useful for allowing different behavior between development builds and release builds.

在您的 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 文件中，您可以在 per-environment 的基础上将其换出。

Answer 2

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

externals: { 'config': ... }表示non-existingconfig模块导出映射到指定值。

它应该像这样使用：

import * as config from 'config';

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

Store/retrieve 使用 Typescript 在 React 项目中配置设置

Store/retrieve config settings in React project with Typescript

config

typescript

reactjs

webpack