时间戳

首页 > 解决方案 > 浏览器支持模块导入，我该如何使用它？

javascript - 浏览器支持模块导入，我该如何使用它？

问题描述

我试图弄清楚为什么我的脚本标签在我的 html 文件中不起作用，我遇到了一篇文章，说您可以通过带有类型的脚本标签将模块module导入浏览器。直接来自该站点：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 或类似的东西。

标签： javascriptnode.jsnpm

解决方案

在 a 中声明的变量<script type="module">是该模块的本地变量。制作example.js一个模块，从那里导入类，然后你就可以使用它们了：

HTML

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

例子.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);

推荐阅读