如何在浏览器中加载简单的es6模块?

问题描述 投票:2回答:1

我正在尝试使用新浏览器的功能,允许您加载与脚本相关的JavaScript模块。

这个例子似乎超级直截了当。您只需将类型属性从"text/javascript"更改为"module"

我有一个简单的test.js文件,它只抓取一个DOM节点并将其内部HTML设置为“Hello”:

const output = document.querySelector("#output");
output.innerHTML = "hello";

这适用于type = "text/javascript",但与type = "module"失败:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Modules</title>
  </head>
  <body>
    <main>
      <h1>JS Modules</h1>
      <div id="output"></div>
    </main>
    <script type="module" src="./test.js"></script>
  </body>
</html>

我错过了什么?

javascript browser module
1个回答
1
投票
<script type="module"></script>

只在现代浏览器中支持。他们在......

  1. Safari 10.1。
  2. Chrome 61。
  3. Firefox 54 - 在about:config中的dom.moduleScripts.enabled设置后面。
  4. 边缘16。

除此之外的其他浏览器,您的脚本将无法加载

为了向后兼容,您可以添加nomodule脚本

<script type="module" src="./test.js"></script>
<script nomodule src="fallback.js"></script>

这是一个更完整的参考https://jakearchibald.com/2017/es-modules-in-browsers/

© www.soinside.com 2019 - 2024. All rights reserved.