从unpkg导入javascript中的远程模块

Question

我正在尝试导入javascript文件中的整个模块。

此文件适用于Home Assistant环境，其中前端用javascript编写，通常使用LitElements和模块(参见documentation)。

例如，文档使用了一种奇特的wired-card，写道：

import "https://unpkg.com/wired-card@0.8.1/wired-card.js?module";.

我读过很多关于import调用的文章，但参考资料通常都是关于本地元素的，似乎我需要它们是远程的。

事实上，我对普通的JS非常了解，但我对导入模块(以及LitElements )一无所知。

例如，我正在寻找一个手风琴(扩展面板)，如the one of JQueryUI。我找到了几个资源(例如here、here或here)，但我找不到如何轻松地导入它们。

是什么让模块成为可导入的？这些是不是我做错了？

Answer 1

在标准ECMAscript中，如果JS文件定义了新系统中的模块，则该文件是可导入的。有点像是圆形的。

基本上，它应该从模块文件中导出一些资源。例如，如果我有一个test-module.js，我可以使用export关键字导出一些类：

class Fubar {}

export { Fubar }

// or, more concisely

export class Fubar {}

export关键字告诉模块系统定义的资源应该对导入器可用。

另一方面，如果你想导入一个模块，你也必须从一个模块导入！这是因为模块导入是异步的，并在执行之前进行处理(动态import()函数除外)。

因此，如果我想从另一个模块导入我的Fubar类，我可以这样做：

import { Fubar } from './test-module.js`

但是，如果我将这个脚本作为非模块加载，我会得到一个错误。相反，我必须告诉浏览器该脚本是一个模块：

<script type="module" src="test-module.js"></script>

因此，简而言之，如果某个东西本身是一个模块，那么它就是“可导入的”。

更多阅读：

关于模块系统的

• Mozilla开发人员网络文章：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

关于https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import关键字的

• MDN文章

编辑:我遗漏了一些东西-为了让web资源更好一些，导入URL可以是任何URL，而不仅仅是相对路径。这允许将第三方脚本作为模块导入。但是，这些第三方脚本本身需要是模块。