时间戳

首页 > 解决方案 > Javascript 模块未在 Chrome v91 中的 HTML 中加载

javascript - Javascript 模块未在 Chrome v91 中的 HTML 中加载

问题描述

我有一个简单的 javascript 模块，其中包含我的浏览器端 javascript 和节点服务器 ES6 模块通用的类。代码都是同源的，所以没有加载错误，但是从 ES6 模块导出的实体在浏览器脚本中都不可用。忽略重用并仅考虑浏览器端，这是可行的：
latlong.js非模块

function LatLon(lat,lon) {
      this.lat = lat;
      this.lon = lon;
  }

测试.html

<body>
  <script  src="latlong.js"></script>
  <script>
    let test = new LatLon(1,2)
  </script>
</body>

但这不使用模块，因此不能与节点服务器代码共享，所以我希望以下工作但它失败

了 latlong.js模块，该模块可以在服务器端节点 js 代码中正常导入并且可以工作

export class LatLon {
    constructor(lat, lon) {
      this.lat = lat;
      this.lon = lon;
    }
  }

带有模块导入的test.html

<body>
  <script type="module" src="latlong.js"></script>
  <script>
    let test = new LatLon(1,2)  <=Uncaught ReferenceError: LatLon is not defined
  </script>
</body>

关于如何从模块导出类/原型或声明原型类还有许多其他变体，但对我来说都导致相同的错误。

这是在本地网络服务器中运行的，我已经验证了在两种情况下返回的用于加载 latlong.js 的标头具有内容类型application/javascript。由于这是一个 ampps Web 服务器，我可以将 js 和 mjs 请求的 mime 类型更改为 text/javascript 以更符合要求，但这对报告的错误没有影响。

在 HTML 文档中包含模块很常见，那么我做错了什么？

标签： javascripthtmlnode.jses6-modules

解决方案

import如果您不在想要使用它们的地方使用它们，模块将无法工作。您还必须将导入声明script为module一个。

这将起作用：

<script type="module">
  import {LatLon} from 'latlong.js';
  let test = new LatLon(1,2)
</script>

推荐阅读