无法在javascript中的模块外部使用import语句_Javascript_Jquery_Html_Importerror

无法在javascript中的模块外部使用import语句

javascript jquery html

无法在javascript中的模块外部使用import语句,javascript,jquery,html,importerror,Javascript,Jquery,Html,Importerror,我正在学习这个教程，当我做的时候，这个人在画布上是黑色的，我做了这个人所做的，什么都没发生。所以我一直在寻找问题所在。它不断地给我错误 $(document).ready(function(){}); 所以我查了一下这可能是什么，他们说我需要得到jquery，所以我做了，它说要导入$。我这样做了，我不断得到导入错误 import $ from "jquery"; SyntaxError:无法在模块外部使用导入语句我尽了我所能，但没有任何帮助。这是我的代码 Javascript import

我正在学习这个教程，当我做的时候，这个人在画布上是黑色的，我做了这个人所做的，什么都没发生。所以我一直在寻找问题所在。它不断地给我错误

$(document).ready(function(){});

所以我查了一下这可能是什么，他们说我需要得到jquery，所以我做了，它说要导入$。我这样做了，我不断得到导入错误

import $ from "jquery";

SyntaxError:无法在模块外部使用导入语句

我尽了我所能，但没有任何帮助。这是我的代码

Javascript

import $ from "jquery";
var $ = require("jquery");

var Context = {
    canvas: null,
    context: null,
    create: function(canvas_tag_id) {
        this.canvas = document.getElementById(canvas_tag_id);
        this.context = this.canvas.getContext('2d');
        return this.context;
    }
};

$(document).ready(function() {

    // Initialize
    Context.create("canvas");

    Context.context.beginPath();
    Context.context.rect(0, 0, 1250, 650);
    Context.context.fillStyle = 'black';
    Context.context.fill();

});

Html


地狱热

我不知道我做错了什么。

标题应该是问题的简短总结，而不是悲伤的故事。任何人都应该如何预测这样一个标题可能会有什么问题？我运行了上面的代码，没有要求或导入，它工作得很好。当您在html中导入库时，您正在尝试导入jquery。Like指出，您甚至不需要使用被视为使用html文件导入自己的

import

，而

require

是浏览器不支持的common.js格式。也就是说，

import

在现代浏览器上不应该出错，但是您没有提到您尝试在哪个浏览器上执行此操作。因此，我删除了require和import，它显示了此错误

$（document）.ready（function（）{^ReferenceError:$未在对象上定义。（/Users/jk/Desktop/Webpage/main.js:11:1）

我正在使用Chrome browserremove

type=“module”

从HTML中删除。您的js文件似乎实际上不是一个模块。您了解ES6模块吗？

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <title>Hellcraze</title>
    </head>
    <body>
        <script src="main.js" type="module"></script>
        <canvas id="canvas" width="1250" height="640"
            style="border: 1px solid grey; width: 1250px; height: 640px;"
        ></canvas>
    </body>
</html>