importmap和模块在带有Sping Boot vanilla JavaScript中不起作用

xoefb8l8 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(132)

为什么importmap不起作用，为什么export和import在vanilla JavaScript文件中根本不起作用，尽管指定了type='module'?这是在三个现代浏览器中测试的。脚本只能使用<script src='...'>连接以前，用importmap写的都能用，是不是因为之前没有用importmap连接，请指教如何解决;我想使用export/import和importmap。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <link
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous"/>
    <script type="importmap">
      {
        "imports": {
          "@stomp/stompjs": "https://ga.jspm.io/npm:@stomp/[email protected]/esm6/index.js",
          "sockjs-client": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
          "popper": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
          "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js",
          "shoppingCart": "/shoppingCart.js",
          "messaging": "/messaging.js"
        }
      }
    </script>
    <script type="module">
        import "@stomp/stompjs";
        import "sockjs-client";
        import "popper";
        import "bootstrap";
        import "shoppingCart";
        import "messaging";
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta charset="UTF-8"/>
</head>

字符串

JavaScript

来源：https://stackoverflow.com/questions/77652346/importmap-and-module-dont-work-in-vanilla-javascript-with-spring-boot

1条答案

按热度按时间

093gszye1#

你的importmap看起来很好，但似乎你没有正确使用模块导入语法。请检查mdn module guide并尝试此示例。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <script type="importmap">
      {
        "imports": {
          "@stomp/stompjs": "https://ga.jspm.io/npm:@stomp/[email protected]/esm6/index.js",
          "sockjs-client": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
          "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
          "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js",
          "shoppingCart": "./shoppingCart.js",
          "messaging": "./messaging.js"
        }
      }
    </script>
    <script type="module">
        import { Client } from '@stomp/stompjs';
        import * as sockjs from  "sockjs-client";
        import '@popperjs/core';
        import "bootstrap";
        import { shoppingCart } from './shoppingCart.js';
        import { messaging } from './messaging.js'

        const SockJS = sockjs.default;
        console.log({ Client, SockJS, Popper, bootstrap, shoppingCart, messaging });
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>

</body>
</html>

字符串

赞(0）回复(0）举报 2024-01-05

我来回答

importmap和模块在带有Sping Boot vanilla JavaScript中不起作用

1条答案

相关问题

热门标签

最新问答