问题描述
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>
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'
,浏览器无法解析。