无需Node.js使用MUI X:如何获取/构建独立Bundle?
问题:在无Node.js的浏览器环境使用MUI X RichTreeView
背景与已实现的方案
我已经能在不依赖Node.js的浏览器环境中使用React和Material-UI,示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script> <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const { Button } = MaterialUI; function App() { return (<Button>Hello World!</Button>); } ReactDOM.render(<App />, document.getElementById("root")); </script> </body> </html>
遇到的问题
但我实际需要使用MUI X的RichTreeView组件,发现MUI X并未提供打包好的UMD包。尝试以下代码时出现报错:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script> <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const { RichTreeView } = MaterialUI; function App() { return (<RichTreeView />); } ReactDOM.render(<App />, document.getElementById("root")); </script> </body> </html>
报错信息:
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
提问
- 是否存在现成的可本地引入的MUI X UMD包?
- 如果没有,如何自行构建一个独立的
mui-x.js文件?我的项目是类桌面浏览器应用,可以接受为构建该Bundle临时安装后端工具,但后续无需依赖这些工具。
内容的提问来源于stack exchange,提问作者ABu
相关产品推荐
相关产品推荐

