Question

让我说我用

导入以下html文件

<link rel="import" href="somefile.html">

和somefile.html看起来像这样：

<template>
    <some-tags>...</some-tags>
</template>

<script type="module">
    export default { some object }
</script>

通常我会像这样导入一个es6模块

import MyVariable from 'somefile.js'

但是在这种情况下我不能指向html文件而且我不知道如何导入我通过链接导入的模块。这是可能的还是我需要用全局变量替换导出默认值？

Answer 1

浏览器中的模块支持非常新，并且只需要很小的时间。据我所知what specification we have for this so far，目前唯一支持的模块说明符是引用JavaScript资源的URL。您当前显示的导出目前无法导入。从那个链接的规范：

要解决给定脚本脚本和JavaScript字符串说明符的模块说明符，请执行以下步骤。它将返回URL记录或失败。



将URL解析器应用于说明符。如果结果不是失败，则返回结果。



如果说明符不是以字符U + 002F SOLIDUS（/）开头，则是双字符序列U + 002E FULL STOP，U + 002F SOLIDUS（./）或三字符序列U + 002E全停，U + 002E全停，U + 002F SOLIDUS（../），返回失败。

这个限制已经到位，以便将来我们可以允许自定义模块加载器为“裸”导入说明符赋予特殊含义，例如导入“jquery”或导入“web / crypto”。目前，任何此类导入都将失败，而不是被视为相对URL。



返回将URL解析器应用于说明符的结果，并将脚本的基本URL作为基本URL。

相反，将该导出移动到其自己的文件中，并使用引用该文件的模块说明符将其导入。

Answer 2

您可以将代码提取到另一个文件中，例如somefile.js：

export default {
 //...
};

然后您可以在模板中导入它：

<template>
    <some-tags>...</some-tags>
</template>

<script type="module">
    import somefile from "somefile.js";
    //... Whatever
</script>

在任何其他代码中......请注意，您应该使用webpack或类似系统将代码转换为ES3。 Html模块尚未得到很好的支持。

从本地脚本导入ES6模块

2 个答案: