Javascript 如何导入自定义ES6模块？

我在

http://localhost:8000/static/home/js/edit_sites.js

，正在尝试访问位于

localhost:8000/static/global/js/modules/reorder.mjs的模块

编辑_sites.js

从'/static/global/js/modules/reorder.mjs'导入{reorder}；
$(() => {
重新排序（$（'.screenshot list'）；
});

reorder.mjs

export const reorder=（$ul）=>{
//通过单击箭头重新排列屏幕截图
const$up=$ul.find（'.controls:first child'）；
const$down=$ul.find（'.controls:last child'）；
常数paddingBottom=8；
$up.on（'click'，函数（）{
const$li=$（this.parents（'li'）；
如果（！$li.is（“：第一个孩子”））{
const$prev=$li.prev（）；
$li.animate(
{bottom:`${$prev.outerHeight（）+paddingBottom}px`}，
500,
函数（）{
$（this.after（$prev.detach（））.prop（'style'，''）；
},
);
$prev.animate(
{top:`${$li.outerHeight（）+paddingBottom}px`}，
500,
函数（）{
$（this.prop（'style'，''）；
},
);
}
});
$down.on（'单击'，（）=>{
const$li=$（this.parents（'li'）；
如果（！$li.is（':last child'））{
const$next=$li.next（）；
$li.animate(
{top:`${$next.outerHeight（）+paddingBottom}px`}，
500,
函数（）{
$（this.before（$next.detach（））.prop（'style'，''）；
},
);
$next.animate(
{bottom:`${$li.outerHeight（）+paddingBottom}px`}，
500,
函数（）{
$（this.prop（'style'，''）；
},
);
}
});
//提交时更新隐藏订单字段的值
$（'form'）。在（'submit'，函数（）{
让顺序='['；
$ul.子项（'li'）。每个（函数（）{
订单+=`${$（this.data（'id'）}`；
如果（！$（this）.is（':last child'））{
顺序+='，'；
}
});
订单+=']'；
$（'input[name=“order”]'）.val（order）；
返回true；
});
};

但是，当我尝试使用闭包缩小它时，会收到以下错误消息：

java -jar bin/closure-compiler-v20200504.jar --language_in=STABLE --js home/static/home/js/edit_sites.js --js_output_file home/static/home/js/edit_sites.min.js
home/static/home/js/edit_sites.js:1: ERROR - [JSC_JS_MODULE_LOAD_WARNING] Failed to load module "/static/global/js/modules/reorder.mjs"
import { reorder } from '/static/global/js/modules/reorder.mjs';
^

1 error(s), 0 warning(s)


我想知道我应该如何定义路径，因为这样做的几次尝试都没有成功。我尝试过的一些途径：

从'./home/static/global/js/modules/reorder.mjs'导入{reorder}；
从“./static/global/js/modules/reorder.mjs”导入{reorder}；
从“/home/matt/Repositories/project dir/home/static/global/js/modules/reorder.mjs”导入{reorder}；

我认为部分问题在于闭包试图从不同于脚本的位置访问模块。我刚开始编写模块，所以我不完全确定
目录在哪里。闭包在
/home/matt/Repositories/projectdir
中执行，但当我从那里阻止路径时，我得到一个错误。以下是我的静态目录结构，省略了不相关的文件，以防您希望直观地逐步了解：

arch-laptop static > tree (pwd)
/home/matt/Repositories/project-dir/home/static
├── global
│   ├── img
│   ├── js
│   │   └── modules
│   │       └── reorder.mjs
│   └── sass
├── home
│   ├── css
│   ├── img
│   ├── js
│   │   └── edit_sites.js
│   └── sass
└── lib
    ├── css
    └── js

13 directories, 55 files

编辑
我应该在我最初的帖子中明确指出，我的最终目标是：

缩小这两个文件，以及
正确地使用它们
尽管在这里收到了有用的信息，但我仍然停留在第一步。我已经能够缩小ES6模块，
reorder.mjs
→ 
reorder.min.mjs
，但不是常规ES6文件
edit_sites.js

我发现了一个可能有用的闭包编译选项：

java -jar ./bin/closure-compiler-v20201102.jar --help | less -R
…
JS Modules:
 --js_module_root VAL                   : Path prefixes to be removed from ES6
                                          & CommonJS modules.
…

…因此，我更新了
edit_sites.js
的第1行，以包含相对于
edit_sites.js
新创建的
reorder.min.mjs
文件的路径（如下两个答案所示）：

从“../../global/mjs/modules/reorder.min.mjs”导入{reorder}；

…但是当我尝试编译时，我得到了与以前相同的错误：

java -jar bin/closure-compiler-v20201102.jar --js_module_root ../../global/mjs/modules --js home/static/home/js/edit_sites.js --js_output_file home/static/home/js/edit_sites.min.js
home/static/home/js/edit_sites.js:2:0: ERROR - [JSC_JS_MODULE_LOAD_WARNING] Failed to load module "../../global/mjs/modules/reorder.min.mjs"
  2| import { reorder } from '../../global/mjs/modules/reorder.min.mjs';
     ^

1 error(s), 0 warning(s)

我想知道：

我应该在常规JS文件中使用
import
语句。例如，我已尝试从
edit_sites.js
中删除导入，缩小它而不出错，并使用以下HTML导入：


但是，我在控制台中遇到以下错误：

11:23:23.859未捕获引用错误：分配给未声明的变量重新排序
http://localhost:8000/static/global/mjs/reorder.min.mjs:8
重新排序。最小mjs:8:69

我应该使用相对于
closure-compiler-v20200504.jar的路径，并带有
--js\u module\u root
标志。但是，将第1行更改为

从“../home/static/global/mjs/modules/reorder.min.mjs”导入{reorder}；

也不起作用。
闭包正在查找模块文件，因此路径不正确

尝试放置
。/../static/global/js/modules/reoder.mjs
或甚至
。/../global/js/modules/reoder.mjs
其中一个可以处理此问题：）
我会使用“../”后退几个文件夹，然后使用“/：name”前进

尝试：
从“../../global/js/modules/reorder.mjs”导入{reorder}

此外，如果您的文本编辑器具有intellisense，则在您键入“/”后，它应向您建议文件夹。我建议在这样的项目中使用vscode或sublime。
这些都不起作用，而且我知道输入错误<代码>重新排序

→ <代码>重新排序我正在使用VS代码，IntelliSense帮助我构建路径

。/../global/js/modules/

，但我无法选择该文件。它会出现在侧边栏中，但不会出现在关联菜单中。这可能与Close找不到它有关吗？另外，我尝试了

touch

ing该文件，但没有帮助。如果该文件是.js文件，则只能使用IntelliSense选择该文件。您的文件是.mjs文件，这意味着您必须在确定文件夹路径后自己键入reorder.mjs。我只是用VS代码为您的项目建模，导入reorder.mjs没有问题。我使用的文件路径是从“../../global/js/modules/reorder.mjs”导入{reorder}我对问题添加了更多内容。请看一看有没有