没有 babel 的 preact-router/match 进一步解释

如何解决没有 babel 的 preact-router/match 进一步解释

Preact 吹嘘它 doesn't need build tools，但我看不出有什么方法可以让 preact-router/match 工作。当我这样做时：

<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 进行哪些更改才能使其正常工作？

解决方法

preact 和 preact-router 是两个不同的包。 preact-router 本身依赖于 preact。所以，有一个依赖图。要在浏览器本身中没有任何构建器的情况下解决此依赖关系图，您需要 System.js 或等效项。

或者，不是将 preact-router 作为 Module 加载，而是将其作为普通的自捆绑 IIFE 脚本导入：

<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 bundle，你应该从这个位置使用：

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 解析算法从 node_modules 中提取它。但是浏览器不了解 node_modules。你必须教它。在编译时，我们使用模块捆绑器，而在运行时，如果您需要解析模块，则需要像 System.js 这样的模块加载器。

ES Modules 中有四种导入方式

// 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'，浏览器无法解析。