如何通过Webpack的外部环境使用CDN导入ReactJS Material UI？]

Question

问题：

我正在尝试使用React和Material UI创建一个网站（网络应用程序），使用npm可以正常工作。但是，当我尝试将它们设置为externals并通过CDN导入它们时，出现Material UI错误（React可以正常工作）。

我的代码：

我在index.html中链接了CDN，如下所示：

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js"></script>
<script src="app.min.js"></script>
并且在app.min.js

中，我这样导入它们：

import { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@material-ui/core';
我的尝试：

在webpack.config.js中，我尝试了以下操作（再次，只有Material UI会导致错误）：

1. 使用字符串：

   externals: {
     'react': 'React',
     'react-dom': 'ReactDOM',
     '@material-ui/core': 'Button'
   }
   给予：

   未捕获的ReferenceError：未定义按钮

2. 使用对象：

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  '@material-ui/core': {
    Button: '@material-ui/core'
  }
}
给予：

TypeError：无法读取未定义的属性'Button'

3. 手动执行，因此材料界面不在外部：

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM'
}
然后从app.min.js

中删除缩小的Material UI代码，这使代码不完整并且无法运行。

4. 通过GitHub问题搜索，没有任何运气，有些链接：

• How should material-ui be externalized when bundling with webpack
• Externals defined in webpack.config still getting error module not found
• React CDN: Webpack externals library not resolved in code

任何想法我该如何解决？

问题：我正在尝试使用React和Material UI创建一个网站（网络应用程序），使用npm可以正常工作。但是，当我尝试将它们作为外部对象并通过CDN导入时，我...

Answer 1

解决方案：

Answer 2

[我在尝试使用微前端架构构建应用程序时花了太多时间在这个问题上，之后才解决了这个问题。