通过CDN导入@material js库

Question

我正在尝试使用导入地图导入材料设计到我的项目中。

但是我遇到了问题。我试图通过importmap导入它，但由于所有材料组件都在@material/[component]名称空间内，但CDN从材料设计文档代理到一个模块(UMD，如果我没记错的话)，这是一个包含所有这些名称空间作为出口的单个文件。

例如:

import { MDCList } from '@material/list';
const l = new MDCList(...);

等价于:

import { list } from 'material-design-web';
const l = new list.MDCList(...);

但是据我所知，@material没有CDN，所以有没有一种方法，告诉它像模块内部的命名空间一样对待斜杠之后的内容?

有人这样想:

<script type="importmap">
{
"imports": {
"@@material/": "https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"
}
}
</script>

，但会抛出错误:Uncaught TypeError: Failed to resolve module specifier "@material/list". Import Map: "@material/list" matches with "@material/" but is blocked by a null value

有办法解决这个问题吗?还是我必须忘记使用CDN?(不改变输入)

Answer 1

所以对于CDN版本，它看起来没有路径可遵循。

相反，路径下的所有模块都被web打包到根模块中，所以对于你的特定模块导入，你可以这样做:

导入地图

<script type="importmap">
{
"imports": {
"@material/": "https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"
}
}
</script>

之后

import { list as MDCList } from "@material"

---

顺便说一下，我在稍微不同的情况下遇到了相同的错误Failed to resolve module specifier ... but is blocked by a null value。在我的例子中，我没有在import map条目的右侧添加尾斜杠。

EX: had this:"tools/" : "./tools"但需要这样做:"tools/" : "./tools/"注意额外的斜杠.

---

对于您的特殊情况，您需要一个本地路径或远程CDN来服务于非webpack模块文件树。然后你可以这样做:

"imports": {
"@material/": "https://fake-magic-cdn.com/material-components/"
}

…

import { MDCList } from '@material/list';

但是，由于您的CDN提供的是web打包版本，因此请使用答案第一部分提供的设置。