Question

我目前正在React开展一个项目，并使用Typescript作为语言。在我的项目中，我安装了Webpack。一切正常但现在，因为我们要开始制作，我想有一种简单的方法来存储/检索config settings，例如服务器URL（通常在开发，测试和生产阶段之间不同），我得到了卡住。我尝试通过添加webpack.config.js密钥来使用"externals"文件：

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';

但是我收到以下错误消息：

＆＃39; webpack.config.js＆＃39;已解决为＆＃39; [PROJECT_DIR] /webpack.config.js'，但是＆＃39; - allowJs＆＃39;没有设定。

解决此问题的任何解决方案/替代方案？感谢

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模块中使用它。

使用Typescript

2 个答案: