javascriptservices中的配置文件-redux模板

Question

我知道这是一个非常常见的问题，我在多个站点上多次回答过这个问题，但我无法让它起作用--我正在为一个react组件使用api和api(我使用的是类型记录2.4.1和webpack 2.5.1)：

....
fetch("some/url/api/", method:"POST",...).then(/*some code*/)

我希望自动检测应用程序所处的环境，并使用正确的api，这取决于它是prod还是dev。

通过网络搜索，我可以设法把这些放在webpack.config中：

...
var API_URL = {
  production: JSON.stringify('http://some.server.example'),
  development:  JSON.stringify('http://localhost:xxxx')
}

var environment = process.env.NODE_ENV === 'production'?'production':'development'

..。

const sharedConfig = () =>({
  ...
  plugins:[
    ...
    new webpack.DefinePlugin({
      'API_URL':API_URL[environment]  
    })
  ]
});

通过像这样调用fetch：fetch(API_URL+"api/endpoint")。我说错了：

Cannot find name 'API_URL'.any

我应该导入一些特定的东西来获取API_URL值吗？我认为API_URL是全球通用的。任何帮助都将不胜感激。

Answer 1

此错误是因为类型抄本编译器不知道webpack将提供API_URL，因此它实际上做得很好，并警告您使用的是一个不存在的变量。您知道构建将提供此功能，因此您可以通过首先声明它来让它知道它的存在。

declare const API_URL: string
//...
fetch(API_URL + "api/endpoint").then(/* ... */)