preact-不带babel的路由器/匹配

Question

preact-router/match吹嘘说它是doesn't need build tools的，但我看不到让Preact工作的方法。当我这样做的时候：

<script type="module">
    import { Match } from 'https://unpkg.com/preact-router@3.2.1/src/match.js';
</script>

它抱怨the file中的<Match>标记

Uncaught SyntaxError: expected expression, got '<'

而且this one显然不是一个JavaScript模块。有没有办法让它工作呢？或者，要对preact-router进行哪些更改才能使其正常工作？

Answer 1

preact和preact-router是两个不同的包。preact-router本身依赖于preact。因此，这里有一个依赖图。要在浏览器本身不使用任何构建器的情况下解析此依赖关系图，您需要System.js或等效的工具。

或者，不将preact-router作为Module加载，而是将其作为正常的自捆绑生命周期脚本导入：

<script src="https://unpkg.com/preact-router@3.2.1/dist/preact-router.js"></script>

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

<script src="https://unpkg.com/preact@10.5.13/dist/preact.min.js"></script>
<script src="https://unpkg.com/preact-router@3.2.1/dist/preact-router.js"></script>

进一步的解释。

要使用ES包，您应该从以下位置使用：

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

如果打开此文件，您会注意到它从preact库中导入的内容如下：

import { Component, cloneElement, createElement, toChildArray } from 'preact';

当您在浏览器中将其作为module类型加载时，并且当浏览器遇到此导入语句时，它无法确定必须从何处准确地获取preact依赖项。它是相对于CDN的吗？它是否与您从中加载应用程序的域相关？或者，它是相对于浏览器地址栏中显示的路径？

对于TypeScript/Bable或者像Webpack这样的前端错误，它通常使用节点解析算法将其从node_modules中拉出。但是浏览器并不了解node_modules。你必须去教它。在编译时，我们使用模块绑定器，而在运行时，如果你需要解析模块，你需要像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'。