如何导入自定义 ES6 模块？

Question

我在 有一个 JavaScript 文件http://localhost:8000/static/home/js/edit_sites.js，它试图访问localhost:8000/static/global/js/modules/reorder.mjs.

edit_sites.js

import { reorder } from '/static/global/js/modules/reorder.mjs';

$(() => {
  reorder($('.screenshot-list'));
});

重新排序.mjs

export const reorder = ($ul) => {
  // reorder screenshots by clicking arrows
  const $up = $ul.find('.controls :first-child');
  const $down = $ul.find('.controls :last-child');
  const paddingBottom = 8;

  $up.on('click', function () {
    const $li = $(this).parents('li');

    if (!$li.is(':first-child')) {
      const $prev = $li.prev();

      $li.animate(
        { bottom: `${$prev.outerHeight() + paddingBottom}px` },
        500,
        function () {
          $(this).after($prev.detach()).prop('style', '');
        },
      );

      $prev.animate(
        { top: `${$li.outerHeight() + paddingBottom}px` },
        500,
        function () {
          $(this).prop('style', '');
        },
      );
    }
  });

  $down.on('click', () => {
    const $li = $(this).parents('li');

    if (!$li.is(':last-child')) {
      const $next = $li.next();

      $li.animate(
        { top: `${$next.outerHeight() + paddingBottom}px` },
        500,
        function () {
          $(this).before($next.detach()).prop('style', '');
        },
      );

      $next.animate(
        { bottom: `${$li.outerHeight() + paddingBottom}px` },
        500,
        function () {
          $(this).prop('style', '');
        },
      );
    }
  });

  // update value of hidden order field on submit
  $('form').on('submit', function () {
    let order = '[';

    $ul.children('li').each(function () {
      order += `${$(this).data('id')}`;

      if (!$(this).is(':last-child')) {
        order += ', ';
      }
    });

    order += ']';

    $('input[name="order"]').val(order);

    return true;
  });
};

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

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)

我想知道我应该如何定义路径，因为多次尝试都没有奏效。我尝试过的一些路径（很多）：

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)

我认为问题的一部分是 Closure 试图从与脚本不同的位置访问模块。我是编写模块的新手，所以我不完全确定.目录在哪里。关闭在 中执行/home/matt/Repositories/project-dir，但是当我从那里开始我的路径时，我收到一个错误。这是我省略了不相关文件的静态目录结构，以防您想直观地浏览：

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

编辑

我应该在我的原始帖子中明确表示我的最终目标是：

1. 缩小这两个文件，以及
2. 使用它们没有错误。

尽管在这里收到了有用的信息，但我仍然停留在第一步。我已经能够缩小 ES6 模块，reorder.mjs？reorder.min.mjs，但不是常规的 ES6 文件，edit_sites.js.

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

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.
…

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

import { reorder } from './home/static/global/js/modules/reorder.mjs';
import { reorder } from './static/global/js/modules/reorder.mjs';
import { reorder } from '/home/matt/Repositories/project-dir/home/static/global/js/modules/reorder.mjs';

…但是当我尝试编译时，我得到了和以前一样的错误：

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)

我想知道是否：

1. 我应该import在常规 JS 文件中使用语句。例如，我尝试从 中删除导入edit_sites.js，无误地将其缩小，并使用以下 HTML 导入：

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

        但是，我在控制台中收到此错误：

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.
…

2. 我应该使用相对路径closure-compiler-v20200504.jar与--js_module_root标志。但是，将第 1 行更改为

import { reorder } from '../../global/mjs/modules/reorder.min.mjs';

        也不行。

Answer 1

闭包正在寻找模块文件，因此路径不正确；

尝试放置../../static/global/js/modules/reoder.mjs，甚至../../global/js/modules/reoder.mjs其中之一可以处理这个:)