问题:
我正在尝试使用 React 创建一个网站(网络应用程序)和 Material UI ,使用 npm 工作得很好。但是,当我尝试将它们作为外部组件并通过 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 会导致错误):
使用字符串:
externals: { 'react': 'React', 'react-dom': 'ReactDOM', '@material-ui/core': 'Button' }
给出:
Uncaught ReferenceError: Button is not defined
使用对象:
externals: { 'react': 'React', 'react-dom': 'ReactDOM', '@material-ui/core': { Button: '@material-ui/core' } }
给出:
TypeError: Cannot read property 'Button' of undefined
手动执行,因此 Material UI 不在外部:
externals: { 'react': 'React', 'react-dom': 'ReactDOM' }
然后从 app.min.js 中删除缩小的 Material UI 代码,这会使代码不完整并且无法运行。
搜索了 GitHub 问题和 SO 问题,但没有任何运气,一些链接:
知道如何解决这个问题吗?
最佳答案
聚会可能有点晚了,但我会添加一个对我有用的答案。
第 1 步:
添加来自 unpkg 的脚本标记。这和 cdnjs 的区别在于 unkpg 有一个 umd 选项。在您的特定情况下可能会或可能不会成为问题。这是给我的。 网址: https://unpkg.com/@material-ui/core@4.11.0/umd/material-ui.production.min.js
脚本标签:
<script src="https://unpkg.com/@material-ui/core@4.11.0/umd/material-ui.production.min.js"></script>
步骤 1b:
按照material-ui 文档中的描述添加字体和字体图标外部资源:
material-ui getting started - installation guide
机器人字体:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
字体图标:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
第 2 步:
从 window.MaterialUI 解构您想要使用的元素或使用方括号表示法(但这里没有必要,因为这个包放弃了“-”字符。
const { Button } = window['MaterialUI'];
第 3 步:
像“通常”一样使用该元素
<Button variant="contained" color="primary">
Primary
</Button>
关于reactjs - 如何通过 Webpack 的外部使用 CDN 导入 ReactJS Material UI?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50645796/