如何从全局变量导入React？

Question

我有一个特殊的情况。一个Web应用程序基于React构建。 React上还有另一个JavaScript实用程序，但是该实用程序是通过script标签加载的。因此，应用程序和实用程序是独立构建的。结果，Web应用程序捆绑包文件和实用程序捆绑包文件都内置了React。

现在，我们要使它们共享一份React。最好将React导出为Web应用程序代码（例如global.React）中的全局变量，以便实用程序可以直接使用它。

实用程序中的代码仍如下所示。希望webpack可以忽略它，并从React导入global.React。

import React from 'react';
import ReactDOM from 'react-dom';

问题是：如何配置webpack告诉实用程序不要捆绑React？

Answer 1

经过一些非反应性应用程序的测试：

index.html中的

• 从CDN导入React，这将定义全局React。

  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

• 在应用程序中执行以下操作的某个位置，解析为React实例：

  declare var React; console.log('React is ', React);

因此，如果您的第一个捆绑包在全球注册React，则可以使用它。

请记住，这样从全球导入是不明智的做法。它超越了webpack的模块化概念。例如，如果您的第一个模块升级到React的某个向后不兼容的版本，那么您的第二个模块也将最终崩溃。

对于小型项目，可能还可以。