Javascript 不带巴别塔的预演路由器/比赛

Preact吹嘘这一点，但我认为没有办法让

Preact router/match

工作。当我这样做时：

从导入{Match}'https://unpkg.com/preact-router@3.2.1/src/match.js'；

它抱怨以下内容中的

标记：

---

Uncaught SyntaxError:expected expression，get'The
preact
和
preact router
是两个不同的包
preact路由器
本身依赖于
preact
。因此，有一个依赖关系图。要在浏览器本身中不使用任何生成器来解析此依赖关系图，您需要System.js或等效工具

或者，不要将
前置路由器
作为
模块
加载，而是将其作为正常的自绑定IIFE脚本导入，如下所示：



只需确保在加载此脚本之前，
preact
也在全局范围内可用。因此，你应该：



进一步解释。
要使用ES捆绑包，您应该从此位置使用：

https://unpkg.com/browse/preact-router@3.2.1/dist/preact router.es.js

如果打开此文件，您会注意到它从
preact
库导入为：

从'preact'导入{Component，cloneElement，createElement，toChildArray}

当您以
模块
的形式加载该模块时，以及当浏览器遇到此导入语句时，它无法确定必须从何处准确获取
预执行
依赖项。它是相对于CDN的吗？它是否与从中加载应用程序的域相关？或者，它是否相对于浏览器地址栏中显示的路径

在TypeScript/Bable或前端错误（如Webpack）的情况下，它通常使用节点解析算法将其从节点_模块中提取。但浏览器不了解节点单元模块。你必须教它。在编译时，我们使用模块绑定器，而在运行时，如果需要解析模块，则需要像System.js这样的模块加载器

ES模块中有四种类型的导入

// 1. Bare imports (Not supported by browsers directly)
import { Component } from 'preact';

// 2. Relative imports (Supported)
import { X } from './x.js';

// 3. Root relative imports (Supported)
import { X } from '/relative/to/site/root/x.js';

// 4. Absolute imports (Supported)
import { render } from 'https://unpkg.com/preact@10.5.13/dist/preact.module.js';

因此，即使您的库作为ES模块提供，它在内部也依赖于浏览器无法解析的bare导入指定的
'preact'
。
首先，
preact
！=<代码>预作用路由器
。它们是不同的包，一般来说，如果没有构建工具，客户端路由很少完成。这样做通常没有意义。“它抱怨”是什么意思？您需要提供一个实际的错误/警告。我知道，
preact
！=<代码>预作用路由器

。但是，

preact

使它听起来好像可以在没有

babel

的情况下使用，但是

preact

没有路由器。。。它并不总是有用的。我知道在生产中通常使用捆绑包，但我需要它作为测试页面。比如，你知道，当你想给人们一些小东西，他们可以复制，粘贴和运行。最后使用了

react

。并添加了错误消息。

preact

可以在没有babel的情况下使用。它对它没有要求。对你的需求没有帮助并不意味着对其他人没有好处。有很多方法可以在不需要路由器的情况下构建应用程序，比如SSR。如果你只需要一个测试页面，我不明白为什么需要路由器。您可以复制、粘贴、运行基于

preact

的UI

preact router

用于制作一个成熟的SPA，它几乎没有理由不使用构建工具。好的，我照你说的做了。事实上，我在问问题之前就这么做了。现在，他在哪里？另外，您能否提供一个使用

SystemJS

的示例？您能解释一下为什么es模块中的

preact

工作吗？他们做了什么使它工作，而什么是

前置路由器

没有？

// 1. Bare imports (Not supported by browsers directly)
import { Component } from 'preact';

// 2. Relative imports (Supported)
import { X } from './x.js';

// 3. Root relative imports (Supported)
import { X } from '/relative/to/site/root/x.js';

// 4. Absolute imports (Supported)
import { render } from 'https://unpkg.com/preact@10.5.13/dist/preact.module.js';