我正在尝试使用React和Material UI创建一个网站(Web应用程序),使用npm可以正常工作。但是,当我尝试将其设置为externals
CDN并通过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'
}
给出:
未被捕获的ReferenceError:未定义按钮
使用对象:
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'@material-ui/core': {
Button: '@material-ui/core'
}
}
给出:
TypeError:无法读取未定义的属性“ Button”
手动执行,因此Material UI不在外部:
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
然后从app.min.js中删除缩小的Material UI代码,这将使代码不完整,并且无法运行。
搜索GitHub问题和SO问题,没有任何运气,一些链接:
知道我该如何解决吗?
解决方案:
在webpack.config.js中:
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'material-ui': 'window["material-ui"]'
},
然后在app.js中
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'material-ui';
说明:
如果检查材料ui js的cdn版本,您会发现它将其内容导出到material-ui
名称空间中。
如果您像这样配置webpack:
'material-ui': 'material-ui'
webpack会将其编译为:
这导致在寻找的代码material
,并ui
在不存在的全球环境。所以我们必须window["material-ui"]
明确指定
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句