使用Flask时在javascript中导入的正确方法

使用Flask时在javascript中导入的正确方法,javascript,python,flask,Javascript,Python,Flask,我刚开始使用JavaScript。我使用库Three.js用javascript编写了一些代码,现在我想用Python做后端。所以我开始使用烧瓶。 因此,我在templates目录中有index.html,在index.html中,我这样称呼我的script.js: <script type="module" src="/static/script.js"></script> import "/three.js" Three.js文件位于同一静态文件夹中。但是,当我使

我刚开始使用JavaScript。我使用库Three.js用javascript编写了一些代码,现在我想用Python做后端。所以我开始使用烧瓶。 因此,我在templates目录中有index.html,在index.html中,我这样称呼我的script.js:

<script type="module" src="/static/script.js"></script>
import "/three.js"

Three.js文件位于同一静态文件夹中。但是,当我使用Flask时,导入不起作用。

Flask是mirco框架,因此您需要遵循有关使用静态文件的文档说明

看看这篇文章


首先,“导入”语句尚未得到浏览器的广泛支持,因此如果您真的想使用它,您必须使用模块绑定器(例如webpack、broswerify)将所有文件打包成一个大js文件。但是,如果您不熟悉这些工具,老实说,您必须花很多时间来学习如何使用它们

所以我建议你保持简单。例如,您可以首先复制库的源代码,并将其保存到项目的静态文件夹中,以便公开提供。其次,您可以使用以下模板创建HTML文件:


我的前三个.js应用程序
正文{页边距:0;}
画布{宽度:100%;高度:100%}
另外,这个例子来自Three.js官方文档,稍作修改


由于HTML中的所有脚本共享相同的全局环境,因此在加载第一个
标记后,下一个
标记中的代码可以访问之前加载的三个.js全局变量

我删除了我对这个问题的评论,因为这是一个很好的答案。我要补充一点,因为这对OP来说可能并不明显,但我们通常认为这是理所当然的:UI代码与Flask完全断开连接,基本上与之无关。编写JS和HTML并将其天真地发送到浏览器,然后由浏览器执行。我直觉认为OP可能将ES6
import{}从“module”
与Python的
import
混为一谈……是的,我对编写网站代码并不熟悉。没有判断。当然没有,我只是用更多的信息来补充你的好答案,这些信息可能会像假设的那样被掩盖您甚至可以编辑您的答案以添加该内容,如果愿意,还可以将我的评论标记为“不再需要”。@Stephen.W谢谢您的回答!是的,我是新来写网站代码的。最后一个问题,在我的脚本中,我从“/STLLoader.js”导入了类似于
import{STLLoader}的内容。但是,当我像你一样在html文件中导入STLLoader时,我的代码将不再工作。你知道怎么修吗?我尝试过将我的代码从
new STLloader()
更改为
new STLloader.STLloader()
,但这也不起作用。我还认识到STLloader.js也在从三个.module.js导入。。那也不行吗?我的.js文件在stativ文件夹中,html文件在template文件夹中。问题是我试图在另一个js脚本中使用js脚本