实验：导入映射

随着ES 模块在整个 Javascript 生态系统中越来越受欢迎，自然希望能够直接在浏览器中使用它们。我们可以通过 script 的 type="module" 属性来做到这一点，但浏览器需要能够将导入名称解析为可以加载和执行的 Javascript 文件。importmap 脚本类型是解决此问题的方案。

对于 DataTables，我们可以创建一个非常简单的导入映射，如下所示（请注意，DataTables 依赖于 jQuery，因此即使我们实际上没有在这里编写任何 jQuery 代码，我们也需要为它添加一个解析器）

<script type="importmap">
{
    "imports": {
        "jquery": "https://esm.sh/[email protected]",
        "datatables.net": "https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.mjs"
    }
}
</script>

现在浏览器可以使用该映射，我们可以像往常一样 import 和使用 DataTables

<script type="module">
import DataTable from 'datatables.net';

window.addEventListener('DOMContentLoaded',function () {
    new DataTable('#example');
});
</script>

您可以在此处查看该脚本和加载方式。

本文的目标是探讨我们如何才能通过导入映射轻松使用 DataTables，评估这种方法的优势和局限性。

导入映射的吸引力

导入映射是一种在浏览器中启用 ES 模块使用的方法，允许它们使用简单的名称查找来处理外部内容。就是这样！

ES 模块 import 语法在其简洁性方面非常出色。需要一个模块；只需 import 它。我们获得了重用、优化加载和简单易用的语法的优势。打包器可以使用 ES 模块来实现树状摇动，因此不会向客户端提供未使用的代码。结合 DataTables 软件套件包含大量文件这一事实（取决于您要使用的功能和样式），ES 模块使开发工作变得更加容易。

要选择要导入的 DataTables 模块，我们可以使用我们的下载构建器来帮助我们。页面底部显示的 npm 指令和 import 语句与该加载程序的导入语句相匹配。在撰写本文时，DataTables 可以加载 136 个文件（通常您只需要其中几个——您永远不会加载所有文件，因为它们会发生冲突！）。其结果是，您不希望手动为 DataTables 创建导入映射。您只需导入一个涵盖所有内容的映射，然后在您的 Javascript 模块中导入您想要的库。

外部映射

在撰写本文时（2023 年 3 月），没有浏览器支持外部导入映射（例如，JSON 的远程加载），尽管Web Incubator 社区小组正在讨论此事。因此，要启用外部导入映射的使用，我们需要使用 Javascript 为我们创建映射——即加载一个 Javascript 文件，该文件将创建映射并允许我们使用它。

DataTables 的此类文件可在此处获取

要使用它，请将其作为页面上的 script 包含进来，您将立即能够对 DataTabes 使用 import 语句——例如

<script src="https://cdn.datatables.net/1.13.3/js/importmap.js"></script>
<script type="module">
    import DataTable from 'datatables.net';

    window.addEventListener('DOMContentLoaded',function () {
    new DataTable('#example');
    });
</script>

限制

导入映射在所有常青浏览器当前版本中都得到了支持，并且存在用于旧版浏览器的 polyfill，因此可用性并不是太大的问题（除非您仍然需要支持旧版浏览器，例如 IE）。但是，有一些重大问题限制了导入映射在当前时间的实用性。

没有外部 JSON

我们上面已经看到，目前不支持外部 JSON，因此需要使用一种解决方法，该方法将从 Javascript 文件创建导入映射。

每个文档只有一个导入映射

导入映射规范不允许每个 document 使用多个导入映射。仅解析第一个映射，而忽略其他映射。其结果是，您不能包含 DataTables 的导入映射以及 Bootstrap 或任何其他库提供的导入映射——您必须手动将它们组合在一起。

没有子资源完整性

导入映射规范目前不支持子资源完整性 (SRI)。映射无法说明为 datatables.net（或任何其他模块）解析的文件必须具有特定的哈希值，否则应将其视为无效。这是 Web 开发的重要组成部分，尤其是在包含来自外部 CDN 的资源时。

CSS

CSS 没有等效项。我们经常看到这种情况，其中 Javascript 开发工具可以超过 CSS（打包器就是一个常见的例子，其中 CSS 是事后添加的）。DataTables 和其他 Javascript 库在很大程度上依赖于它们的 CSS 来为最终用户显示美观的界面。如果我们仍然需要大量 link 元素用于 CSS，那么拥有单个导入映射以及 Javascript 中的 import 语句有什么意义呢？

结论

我真的很希望导入映射规范能够继续发展，并且浏览器能够完全实现它。它可能是 Web 组件开发的强大工具，但在目前，其实用性有限，而且我还没有（尚未）承诺在每个 DataTables 版本中都提供导入映射。