Javascript 如何正确导入JS库

我只编程了几个星期，有一个问题。我想学习一些框架，找到可拖动的js（来自Shopify.github.io），并想在本地试用一下。但无论我如何尝试，我都无法嵌入它。我有一个HTML文件，其中我通过cdm简单地集成了所有内容，还有一个Javascript文件，其中我只想移动一些Div元素，但当我想导入draggable时，总是会出现以下错误：

SyntaxError: Unexpected token '{'. import call expects exactly one argument.

我的Js代码和Html：

Import { Draggable } from '@shopify/draggable/src/Draggable/Draggable.js'

var elementToDrag = document.getElementById('elementToDrag');
draggable(elementToDrag);
...  



<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/draggable.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/app.js" ></script>

从'@shopify/Draggable/src/Draggable/Draggable.js'导入{Draggable}
var elementToDrag=document.getElementById（'elementToDrag'）；
可拖动（elementToDrag）；
...  

---

如果我在codepen上尝试它，它工作得很好，但是我想在我自己的开发环境中测试它。感谢您的帮助

Import->importi如果将

Import

更改为

Import

无法解决您的问题，请添加有关本地开发环境的更多详细信息。我只使用Atom，我只有一个HTML文件、CSS文件和一个JS文件。到目前为止相当简单。我更改了导入，但仍然存在相同的错误。即使我使用npm创建了一个项目，并通过CDN在我的head部分安装了它+所有东西，我仍然会得到相同的错误：（如果我在导入drag.js文件的head部分添加type=“module”，我会得到：TypeError:module说明符不是以“/”、“/”或“.”开头的.Import->importi如果将

Import

更改为

Import

无法解决您的问题，请添加有关本地开发环境的更多详细信息。我只是使用Atom，我只有一个HTML文件、CSS文件和一个JS文件。到目前为止非常简单。我更改了导入，但仍然存在相同的错误。即使使用npm创建项目然后通过CDN在我的head部分安装它+所有东西，我仍然会得到相同的错误：（如果我在导入drag.js文件的head部分添加type=“module”，我会得到：TypeError:module说明符不是以“/”、“/”或“./”开头的。