importmap 和 module 无法在带有 Spring Boot 的普通 JavaScript 中工作

问题描述 投票：0回答：1

为什么 

importmap
不起作用，为什么 
export
和 
import
在普通 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 html spring-boot ecmascript-6 es6-modules
1个回答
0
投票

您的导入映射看起来不错，但似乎您没有正确使用模块导入语法。请查看 mdn 模块指南 并尝试此示例。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.