Question

我试图弄清楚为什么我的脚本标记在html文件中不起作用，并且遇到了一篇文章，说您可以通过具有模块类型的脚本标记将模块导入浏览器。直接从此网站：https://www.sitepoint.com/understanding-es6-modules/

<script type="module" src="./main.js"></script>
 // or
<script type="module">
  import { something } from './somewhere.js';
    // ...
</script>

因此，我尝试了一下，导入的模块被识别，但是出现此错误Can't find variable World是因为我的example.js文件不在其范围内？我不了解“处理”的顺序？不知道对不起这个术语。我在

下的尝试

 //HTML 
<body>
  <script type="module">
    import { World, Ball, Paddle, Brick, Hud} from "./brickbreakclasses.js"
  </script>
  <script src="example.js"></script>
</body>

example.js文件

 // commented this part out because it was imported in html file    
 // import { World, Ball, Paddle, Brick, Hud } from "./brickbreakclasses";
var canvas = new World(document.getElementById("canvas") );
var ball = new Ball(canvas)
var brick = new Brick(canvas)
var hud = new Hud(canvas)
var paddle = new Paddle(canvas)

我希望这是有道理的，但是我真的很想了解为什么我不能只要求或导入JS文件并将其通过脚本添加到html中。我一直在使用webpack将所有内容打包并将其放入html中。但是，我现在正在制作一个npm软件包，听说人们不喜欢预先捆绑的软件包，因此我正在尝试寻找一种方式供用户使用我的html中的模块，而无需安装webpack或类似的东西。

Answer 1

在<script type="module">中声明的变量是该模块的局部变量。将example.js设为一个模块，从那里导入类，然后可以使用它们：

HTML

<body>
  <script type="module" src="example.js"></script>
</body>

example.js

import { World, Ball, Paddle, Brick, Hud } from "./brickbreakclasses.js";
var canvas = new World(document.getElementById("canvas") );
var ball = new Ball(canvas);
var brick = new Brick(canvas);
var hud = new Hud(canvas);
var paddle = new Paddle(canvas);

浏览器支持模块导入，如何使用？

1 个答案: