从 HTML 文件中的脚本标签导入 js。可能的？

Posted 2023-02-22

【中文标题】从 HTML 文件中的脚本标签导入 js。可能的？

【英文标题】：Import js from script tag in HTML file. Possible?

【发布时间】：2019-10-15 22:20:04

【问题描述】：

我想从 cms 生成的 html 文件中的 script 标签访问数据。 是否可以在不污染全局命名空间的情况下做到这一点？ 我尝试使用 es6 模块，但失败了，也找不到任何相关信息。

    <script>
        let list = ['a','b','c'];
        export default list
    </script>

    //test.js
    import list from './index.html' 

错误： 'http://localhost:8080/index.html net::ERR_ABORTED 404' 要么： '加载模块脚本失败：服务器以“text/html”的非 javascript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。'

【问题讨论】：

您可以使用var 来声明变量，以便可以从其他文件访问它。

【参考方案1】：

不，HTML 规范尚未涵盖这样做¹（我怀疑它永远不会是²）。 （如果是这样，您的第一个脚本标签上仍然需要type="module"。）在 HTML 页面中没有指定脚本元素的 模块说明符。目前，唯一的模块说明符是 JavaScript 文件的 URL。 Details in the spec.

相反，您可能想要这样的东西：

<script type="module">
import  setList  from "./test.js";
setList(['a', 'b', 'c']);
</script>

...test.js 导出一个命名导出，让您告诉它使用哪个列表。

（当然，也可以是默认导出。）

内联 script type="module" 标记可以使用 import，但是虽然它们可以使用 export，但由于它们没有有用的模块说明符，因此没有任何东西可以利用它们创建的导出。

---

¹ 这是 HTML 规范，因为 模块说明符 的形式和语义由 JavaScript 规范留给宿主环境（详情 here）。 JavaScript 规范中关于它们的全部内容是它们是字符串文字。

² 当然可以是，例如使用片段标识符。但是，与 HTTP/1.1（尤其是与 HTTP/1.0）相比，HTTP/2 多路复用使得离散资源加载速度如此之快，现在将所有内容包含在单个资源中的动力比几年前要低得多。

【参考方案2】：

您不能从 HTML 中导出 JS。但是，您可以使用 <script> 标签上的 type="module" 属性导入它：

<script type="module">
  import list from "./test.js";
  //Use list
</script>

【参考方案3】：

我也问过自己同样的问题并找到了您的主题。 但后来想到了一个简单的解决方案。

// buffer.js
    export default let buffer=;

// index.html
<script type="module">
    import buffer from './buffer.js';
    buffer.helloWorld='hello world';
</script>
....
<script type="module">
    import buffer from './buffer.js';
    console.log(buffer.helloWorld);
</script>