從本地腳本導入 ES6 模塊

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

瀏覽器中的模塊支持是非常新的，並且是小部分完成的。 據我所知， 到目前為止， 我們對此有什么規范，目前唯一支持的模塊說明符是引用 JavaScript 資源的 URL。 您顯示的導出當前無法導入。 從該鏈接規范：

要解析給定腳本腳本和 JavaScript 字符串說明符的模塊說明符，請執行以下步驟。 它將返回 URL 記錄或失敗。

1. 將 URL 解析器應用於說明符。 如果結果不是失敗，則返回結果。

2. 如果說明符不以字符 U+002F SOLIDUS (/)、兩字符序列 U+002E FULL STOP、U+002F SOLIDUS (./) 或三字符序列 U+002E FULL STOP、U+ 開頭002E FULL STOP，U+002F SOLIDUS (../)，返回失敗。

   此限制已到位，以便將來我們可以允許自定義模塊加載器為“裸”導入說明符賦予特殊含義，例如導入“jquery”或導入“web/crypto”。 目前，任何此類導入都將失敗，而不是被視為相對 URL。

3. 返回將 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 或類似系統將您的代碼轉換為 ES6。 Javascript 模塊還沒有得到很好的支持。