带有 Preact 和 HTML 的 MUI，无需构建设置

问题描述 投票：0回答：1

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'));
javascript html material-ui preact nobuild
1个回答
1
投票

在我们开始之前，

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'));

希望有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.