Question

我想加载一个配置文件以在应用程序的各个部分中用作全局对象。我不想导入，因为我想与bundle.js保持独立，以便将来在不更改应用程序的情况下进行更改。

我提供了此解决方案，它可以正常工作吗？我可以在将配置附加到窗口对象时遇到问题吗？

// index.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <script src="appconfig.js" type="text/javascript"></script>
    <script src="myAppBundle.js" type="text/javascript"></script>
  </head>
  <body>

...................

// appconfig.js

var GlobalAppConfig = (function () {
      return {
          pictures: "https://www.example.com/pictures",
          videos: "https://www.example.com/videos",
        }
})();

.......................

// App.js

class App extends Component {

    constructor(props) {
            super(props);
            this.state = {
                pictures: window.GlobalAppConfig.pictures
                videos: window.GlobalAppConfig.videos
            }

      }

Answer 1

该技术的缺点是window可能并非在每种情况下（例如测试环境）都可用。

环境变量将是常规解决方案。您可以在构建时定义它们（假设使用Yarn构建步骤）：

$ PICTURES_URL='https://www.example.com/pictures' yarn build

然后在您的代码中：

const picturesURL = process.env.PICTURES_URL || '';

更改环境变量后重建。

在全局窗口对象中加载配置

1 个答案: