Preact 表明您可以将其与 HTML 一起使用,以实现无构建设置此处。这在我的手机上运行良好,因为由于符号链接我无法让 Vite 工作。
MUI 展示了如何安装它并与 Preact 一起使用,但不与 HTML 一起使用,以实现无构建设置。 https://mui.com/material-ui/getting-started/
我已经尝试过
import { Button } from '@mui/material/Button';
尝试过不带括号,甚至直接使用
import { Button } from '../node_modules/@mui/material/Button.js';
导入文件
但是控制台仍然显示...
material-ui.development.js:1848 未捕获类型错误:无法读取 未定义的属性(读取“useLayoutEffect”)
在材料-ui.development.js:1848:74
在material-ui.development.js:9:78
在material-ui.development.js:10:3(匿名)@material-ui.development.js:1848(匿名)@ Material-ui.development.js:9(匿名)@ 材料-ui.development.js:10
127.0.0.1/:1 未捕获类型错误:无法解析模块说明符“@mui/material/Button”。相对引用必须以以下任一开头 “/”、“./”或“../”。
我该怎么做才能使其与 Preact 和 html 一起使用以实现无构建设置?
这是我的代码...
我的package.json:
{
"name": "project",
"private": true,
"version": "0.001",
"type": "module",
"scripts": {},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.19",
"@testing-library/jest-dom": "latest",
"@testing-library/react": "latest",
"@testing-library/user-event": "latest",
"htm": "^3.1.1",
"preact": "^10.22.0",
"react-scripts": "^5.0.0"
}
}
我的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Site title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
<script src="js/standalone.module.js" type="module"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="components/App.js"></script>
</body>
</html>
我的App.js:
import { html, render } from '../js/standalone.module.js';
import { Button } from '@mui/material/Button';
function ButtonUsage() {
return html`
<${Button} variant="contained">Hello world<//>
`;
}
render(html`<${ButtonUsage} />`, document.getElementById('root'));
在我们开始之前,
react-scripts
和 Babel 一起构建工具。这让你的问题有点不清楚。您不应该将其放在无构建设置中。
首先,像
@mui/material/Button
这样的裸导入说明符旨在在 Node 中使用,或者最近与 import Maps 一起使用 - 就其本身而言,它在网络中是无效的说明符。
此外,由于 MUI 是一个 React 库,因此您需要为
preact/compat
设置别名,并且它无法在 Preact 应用程序中开箱即用(如您的错误所示)。
这是一个例子:
注意:我想
是js/standalone.module.js
,如果我们使用导入映射,最好将其提取为这种形式。htm/preact/standalone
<!DOCTYPE html>
<html lang="en">
<head>
<title>Site title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, interactive-widget=resizes-content">
<script type="importmap">
{
"imports": {
"preact": "https://esm.sh/[email protected]",
"preact/": "https://esm.sh/[email protected]/",
"htm/preact": "https://esm.sh/[email protected]/preact?external=preact",
"@mui/material": "https://esm.sh/@mui/material?alias=react:preact/compat,react-dom:preact/compat&external=preact"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="components/App.js"></script>
</body>
</html>
然后在你的脚本中:
import { render } from 'preact';
import { html } from 'htm/preact';
import { Button } from '@mui/material';
function ButtonUsage() {
return html`
<${Button} variant="contained">Hello world<//>
`;
}
render(html`<${ButtonUsage} />`, document.getElementById('root'));
希望有帮助!