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

Question

我想从 html 文件中的脚本标签访问数据，由 cms 生成。 是否可以在不污染全局名称空间的情况下执行此操作？ 我曾尝试使用 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' 或：'无法加载模块脚本：服务器以非 JavaScript MIME 类型“text/html”响应。 根据 HTML 规范，对模块脚本强制执行严格的 MIME 类型检查。

Answer 1

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

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

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

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

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

内联script type="module"标签可以import ，但是虽然它们可以使用export ，但没有什么可以使用它们创建的导出，因为它们没有有用的模块说明符。

---

¹ 这是 HTML 规范，因为模块说明符的形式和语义由 JavaScript 规范留给宿主环境（详情请 点击此处）。 JavaScript 规范只说它们是字符串文字。

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

Answer 2

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

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

Answer 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>

Answer 4

您可以像这样简单地使用全局变量：

• 在您的 HTML 文件中：

 <script>var myGlobalVar = "foo";</script>

• 在您的脚本排队之前在您的 JS 文件中：

/* global myGlobalVar */

alert(myGlobalVar);

然后你可以在 JS 文件中使用你的变量。