javascript - 如何导入自定义 ES6 模块?
问题描述
我有一个 JavaScript 文件http://localhost:8000/static/home/js/edit_sites.js
,它试图访问localhost:8000/static/global/js/modules/reorder.mjs
.
编辑站点.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)
我想知道我应该如何定义路径,因为几次尝试都没有奏效。我尝试过的一些(许多)路径:
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';
我认为部分问题是 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
编辑
我应该在我原来的帖子中明确表示我的最终目标是:
- 缩小这两个文件,并且
- 使用它们没有错误。
尽管在这里收到了有用的信息,但我仍然停留在第一步。我已经能够缩小 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 '../../global/mjs/modules/reorder.min.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)
我想知道是否:
- 我应该
import
在一个普通的 JS 文件中使用一个语句。例如,我尝试从 中删除导入edit_sites.js
,将其缩小而不会出错,并使用以下 HTML 导入:
<script type="module" src="/static/global/mjs/reorder.min.mjs"></script>
<script src="/static/home/js/edit_sites.min.js"></script>
但是,我在控制台中收到此错误:
11:23:23.859 Uncaught ReferenceError: assignment to undeclared variable reorder
<anonymous> http://localhost:8000/static/global/mjs/reorder.min.mjs:8
reorder.min.mjs:8:69
- 我应该使用相对于标志的
closure-compiler-v20200504.jar
路径--js_module_root
。但是,将第 1 行更改为
import { reorder } from '../home/static/global/mjs/modules/reorder.min.mjs';
也不行。
解决方案
我会使用 '../' 后退几个文件夹,然后使用 '/:name' 前进。
尝试:从'../../global/js/modules/reorder.mjs'导入{重新排序};
此外,如果您的文本编辑器具有智能感知功能,它应该在您键入“/”后向您推荐文件夹。对于这样的项目,我建议使用 vscode 或 sublime。
推荐阅读
- google-analytics - 如何在谷歌分析中设置 Rest API 并在 .net 中使用谷歌控制台配置所有端点
- git - 使用 Git 维护 LaTeX 文档的两个不同版本
- python-3.x - 我们如何访问存储在 django 表单中的数据?
- php - 如何在 Windows 10 的 php 7.4.9 中安装 oci8
- google-maps - 如何从 Google Place API 一次对一组坐标进行反向地理编码?
- ssl - TLS 1.3 客户端和服务器无法通信,因为它们没有共同的算法
- java - 这是高效的 BST 插入吗?
- c - 为什么需要给枚举一个标识符?
- php - 创建形状在 laravel 中不起作用(imagecreatetruecolor)
- r - r 中 PortfolioAnalytics 包的 gmv_opt 出错