Question

我想从cms生成的html文件中的脚本标签访问数据。是否可以这样做而不污染全局名称空间？我尝试使用es6模块，但失败了，找不到任何信息。

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

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

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

Answer 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（以及esp。vs.HTTP / 1.0）相比，HTTP / 2复用使离散资源的加载如此之快，现在，使单个资源中包含的所有内容的动力大大低于几年前。 / p>

Answer 2

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

// 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 3

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

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

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

3 个答案: