时间戳

首页 > 解决方案 > JavaScript自定义模块不起作用，请帮助

javascript - JavaScript自定义模块不起作用，请帮助

问题描述

我正在制作一个导入弹出框的 JavaScript 模块，但导入似乎不起作用。我需要一些帮助才能使我的 javascript 程序正常工作

https://github.com/Daniel4-Scratch/JuiceBox

<!DOCTYPE html>
<html lang="en">
<head>
<script>
import {juiceBox} from 'module/pack.js';
import {juiceBoxPopup} from 'module/pack.js';

juiceBox() // Import it
juiceBoxPopup("Hello!", "Hi my name it bob", "Copyright me") // Launch it
</script>
<link rel="stylesheet" href="module/pack.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button id="jb-btn">Open Box</button>
</body>
</html>

标签： javascriptmodule

解决方案

有两个问题：

  1. 您不能import在脚本中使用，只能在模块中使用。要表明您的内联代码是一个模块，您需要type="module"在script标签中添加：

     <script type="module">
 import {juiceBox} from "module/pack.js";
 // ...

  2. 浏览器中的模块路径（除非您使用导入映射）必须以绝对 URL 开头，.或者..是绝对 URL。所以在你的情况下，./module/pack.js.

在 plunker 上工作

推荐阅读