Javascript 从“加载模块；http://127.0.0.1:1234/Ball” 由于使用模块时出现不允许的MIME类型（“；text/html”；）错误而被阻止_Javascript_Html

Javascript 从“加载模块；http://127.0.0.1:1234/Ball” 由于使用模块时出现不允许的MIME类型（“；text/html”；）错误而被阻止

javascript html

Javascript 从“加载模块；http://127.0.0.1:1234/Ball” 由于使用模块时出现不允许的MIME类型（“；text/html”；）错误而被阻止,javascript,html,Javascript,Html,我正在努力寻找脚本无法加载到浏览器的原因。我正在为此运行一个实时服务器，但我继续收到此错误。当我在html中有：“type=”modules/javascript“时，它就消失了，但脚本没有加载。我能够成功地让其他脚本以相同的格式运行，因此我确信我忽略了一些愚蠢的事情，但我似乎无法找到好的信息而不陷入混乱我的html：一, 2. 3. 4. 5个弹跳球（面向对象编程） 6. 7. 8. 9 10 11 12 13 14 15 16 17 //index.js文件： 1从“/Scene.js

我正在努力寻找脚本无法加载到浏览器的原因。我正在为此运行一个实时服务器，但我继续收到此错误。当我在html中有：“type=”modules/javascript“时，它就消失了，但脚本没有加载。我能够成功地让其他脚本以相同的格式运行，因此我确信我忽略了一些愚蠢的事情，但我似乎无法找到好的信息而不陷入混乱

我的html：一,


2.
3.
4.
5个弹跳球（面向对象编程）
6.
7.
8.
9
10
11
12
13
14
15
16
17
//index.js文件：
1从“/Scene.js”导入场景；
2.
>>3常量动画=新场景（）；
//Scene.js文件：
从“./Ball”导入球；
//默认值：
const defaultConfig={
宽度：500，
身高：500，
重力：0.25，
摩擦力：0.98
}
//类是创建对象的函数：
导出类场景{
//构造函数与init（）等价
构造函数（canvasId='gameCanvas'，config）{
this.canvas=document.getElementById（canvasId）；
this.ctx=this.canvas.getContext（'2d'）；
//设置；通过*扩展*合并默认配置和传入的任何配置：
this.conifg={
…默认配置，
…配置
}
this.canvas.width=this.config.width；
this.canvas.height=this.config.height；
这个.createBalls（）；
//使用箭头函数，以便使用“this”属性
document.addEventListener（'DOMContentLoaded'，（）=>this.update（））；
}
createBalls（）{
//场景配置：
const{config}=this；
//随机颜色：
常量颜色=[‘紫色’、‘红色’、‘蓝色’、‘棕色’]；
//球形OBEJCT阵列：
常数球=[]；
for（设i=0；i<20；i++）{
推（新球）(
//随机X和Y位置：
Math.random（）*config.width，Math.random（）*config.height，
//场景conifg：
{
//默认宽度、高度、摩擦系数：
…配置，
//随机+或-重力：
重力：config.gravity*（Math.floor（Math.random（）*2）| |-1）
},
//球的特性：
{
//额外弹性：
反弹：0.90，
半径：Math.random（）*20+10，
颜色：颜色[Math.floor（Math.random（）*colors.length）]
}
));
}
这个球=球；
}
更新（）{
//*分解*场景的变量：
const{ctx，config，balls}=这个；
//排队等待下一次更新：
window.requestAnimationFrame（（）=>this.update（））；
//透明画布：
clearRect（0，0，config.width，config.height）；
//更新我的球！
balls.forEach（ball=>ball.update（））；
//绘制对象：
balls.forEach（ball=>ball.draw（ctx））；
}
}
导出默认场景；

更改此行

从“/Ball”导入球；

为此：

从“/Ball.js”导入球；//将.js添加到球的末尾

您的脚本正在尝试读取名为“Ball”的html文件，而不是JavaScript文件

<!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Bouncing Balls (Object Oriented Programming)</title>
  6     <link rel="stylesheet" href="style.css">
  7     <script type="module" src="index.js"></script>
  8 </head>
  9 <body>
 10     <a href="bouncingBalls.html">Previous Page</a>
 11 
 12     <div class="canvas-container">
 13         <canvas id="gameCanvas" width="1200" height="900"></canvas>
 14     </div>
 15 
 16 </body>
 17 </html>

// index.js file:
1 import Scene from './Scene.js';
    2 
>>  3 const animation = new Scene();

// Scene.js file:
import Ball from './Ball';

// Default values:
const defaultConfig = {
        width: 500,
        height: 500,
        gravity: 0.25,
        friction: 0.98
}

// Classes are functions that create Objects:
export class Scene {
        // Constructor function is equivalent to init()
        constructor (canvasId = 'gameCanvas', config) {
                this.canvas = document.getElementById(canvasId);
                this.ctx = this.canvas.getContext('2d');

                // Settings; merge default config and any passed in config by *spreading* them:
                this.conifg = {
                        ...defaultConfig,
                        ...config
                }

                this.canvas.width = this.config.width;
                this.canvas.height = this.config.height;

                this.createBalls();
                // Use arrow function so we can use 'this' property
                document.addEventListener('DOMContentLoaded', () => this.update());
        }

        createBalls() {
                // Scene config:
                const { config } = this;
                // Random colors:
                const colors = ['purple', 'red', 'blue', 'brown'];
                // Array of ball obejcts:
                const balls = [];

                for (let i = 0; i < 20; i++) {
                        balls.push(new Ball(
                                // Random X and Y positions:
                                Math.random() * config.width, Math.random() * config.height,
                                // scen conifg:
                                {
                                        // default width, height, friciton:
                                        ...config,
                                        // random + or - gravity:
                                        gravity: config.gravity * (Math.floor(Math.random() * 2) || -1)
                                },
                                // ball properties:
                                {
                                        //extra bouncy:
                                        bounce: 0.90,
                                        radius: Math.random() * 20 + 10,
                                        color: colors[Math.floor(Math.random() * colors.length)]
                                }
                        ));
                }

                this.balls = balls;
        }

        update() {
                // *Destructure* scene's variables:
                const { ctx, config, balls } = this;

                // Queue the next update:
                window.requestAnimationFrame(() => this.update());

                // clear canvas:
                ctx.clearRect(0, 0, config.width, config.height);

                // update my balls!
                balls.forEach(ball => ball.update());
                // Draw objects:
                balls.forEach(ball => ball.draw(ctx));
        }
}

export default Scene;