将Solidjs与包裹＆amp; @suid/材料构建失败

Question

我尝试使用 solidjs +包裹+模板启动器项目： https：//github.com/tiagocavalcante/solidts-parcel--

@suid/材料，例如按钮，构建失败。

以下是重现的方法：

1. 查看项目模板从关于about URL。
2. npm i -save @suid/材料
3. 将以下内容放在 index.tsx 中：

import { render } from "solid-js/web";
import SuidButton from '@suid/material/Button'

function App() {
    return <>
    <SuidButton>Testing</SuidButton>
    </>;
}

render(App, document.getElementById("app")!);

您将获得错误输出：

Answer 1

没有官方支持的包裹模板，但您不需要一个。

这是一个基本设置，它使用打字稿并支持热模块更换。我没有对@suid/材料进行测试，但是在您添加必要的依赖项之后，它应该有效。

1. 安装 babel-preset-solid 和@babel/core 。

包裹会自动拾取Babel配置，但最好坚持使用基于JSON的配置。由于包裹提供了自己的替代方案，因此无需 Babel-Transform-runtime 和 Preset-env

包裹都支持两个项目宽的配置文件，例如babel.config.json，以及文件相对配置，例如.babelrc。

注意：应避免使用JavaScript Babel Configs（例如Babel.config.js）。这些导致包裹的缓存效率较低，这意味着每次重新启动包裹时，所有JS文件都会重新编译。
https://parceljs.org/languages/javascript/javascript/#babel

2. 使用以下内容：

{
  "presets": ["solid"]
}

3. 添加打字稿文件：

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "noEmit": true
  }
}

4. 如果愿意，请添加热模块更换（HMR）支持。这是添加人力资源管理的一种非常粗略的方法，它可以按预期加载模块，但不幸的是没有保留状态：

import { render } from 'solid-js/web';
import { App } from './App';
const dispose = render(() => <App />, document.body);

if (module.hot) {
  module.hot.accept();
  module.hot.dispose(dispose);
}

我知道的一个小问题是Parceljs尚不支持有条件的出口，这使得Parceljs加载了SolidJ的生产而不是Solidjs，而不是它的发展建设。 https：//github.com/solidjs/solidjs/solid-solid-refresh#other-dev-photh-dev----------------------------------------------------------------------------------------------------------------- dev--dother-dev--dev---the服务器

这不是包裹部分的缺点，而是由于Nodejs对某些常见兼容性问题的任意解决方案而引起的问题，该解决方案可以用插件解决。

您可以检查内容和文件结构的链接： htttps://stackover.com/a/a/a/75641238/7134134/7134134