javascriptservices react-redux模板中的配置文件

Question

我知道这是一个非常常见的问题，我已经看到它在多个网站上被多次回答，但我无法让它工作问题是我正在消耗并且 api一个 React 组件（我使用的是 typescript 2.4.1 和 webpack 2.5.1）：

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

我想自动检测应用程序所处的环境，并根据它是生产环境还是开发环境使用权限 api。

通过网络搜索我可以设法将其放在一起 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

这个错误是因为 typescript 编译器不知道 webpack 会提供 API_URL，所以它实际上做得很好，并警告你你正在使用一个不存在的变量。你知道构建会提供这个，所以你可以通过声明它来让它知道它存在第一

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

javascriptservices react-redux模板中的配置文件

configuration file in javascriptservices react-redux template

typescript

webpack

javascriptservices