我一直在尝试开发一个基本的 wordpress 经典主题，无需构建步骤，我可以将其用作入门主题，以便将来开发客户端站点。在撰写本文时，我没有做任何自由职业，因为我正在为一家网络机构工作，并且我们正在构建的网站都涉及构建步骤。所以我想写一个关于如何在 wordpress 主题中使用 importmap 的简短教程。
career tracker 是我现有的一个副项目，它已经使用了 importmap，无需构建步骤，但它是一个纯 javascript 应用程序。
让我们看看如何在 wordpress 世界中做到这一点。
入队模块脚本
在我的主题functions.php中，我使用wordpress中的wp_enqueue_script_module函数将我的javascript文件app.js作为模块脚本排入队列。
wp_enqueue_script_module( 'frontend-scripts', gearup_theme_url . '/static/js/app.js', [], gearup_theme_version, true );
这将输出到前端的以下脚本标签。
我的 javascript 文件被放置在主题文件夹的 static 文件夹中。
static├── css│ ├── app.css│ ├── global.css│ ├── reset.css│ ├── utils.css│ └── variables.css└── js ├── admin.js ├── app.js ├── components │ └── menu.js └── utils └── index.js
正如您在此文件结构中所看到的，我需要将 utils 文件夹中的 index.js 和 components 文件夹中的 menu.js 导入到我的 app.js 中。在添加 importmap 之前，让我们看看当我在 app.js 中导入这两个文件时它的样子。
// utilsimport { ondocumentready } from './utils/index.js';// componentsimport menu from './components/menu.js';
但是我想要的是像这样导入文件。
知网AI智能写作
知网AI智能写作，写文档、写报告如此简单
38 查看详情
// utilsimport { ondocumentready } from 'utils/index.js';// componentsimport menu from 'components/menu.js';
一旦我将导入更改为这种格式，浏览器将在控制台中抛出此错误。
uncaught typeerror: failed to resolve module specifier "utils/index.js". relative references must start with either "/", "./", or "../".
importmap 来救援
将其添加到模板 html head 标签中。您可能需要在 php 中渲染此部分，以便获得静态文件夹的动态 url。
{ "imports": { "utils/": "/wp-content/themes/gearup/static/js/utils/", "components/": "/wp-content/themes/gearup/static/js/components/" } }
在我的 app.js 中使用它
现在有了 importmap 设置，即使这不是 node 环境，我们仍然可以在我们熟悉的结构下导入文件。请记住，文件需要以 .js 结尾。
// utilsimport { ondocumentready } from 'utils/index.js';// componentsimport menu from 'components/menu.js';
如果我将 .js 从 utils/index.js 删除到 utils/index，那么浏览器将在控制台中记录此错误。
get http://test.local/wp-content/themes/gearup/static/js/utils/index net::err_aborted 404 (not found)
将 cdn 中的文件添加到我们的导入映射中
{ "imports": { "utils/": "/wp-content/themes/gearup/static/js/utils/", "components/": "/wp-content/themes/gearup/static/js/components/", "ccw/": "https://unpkg.com/cucumber-web-components@0.5.2/dist/" } }
我获取了指向我的 web 组件集合的 cdn 链接，并将其添加到我的导入映射中。添加后，现在我们可以像这样将 web 组件导入到 app.js 中。这不是很漂亮吗？
import "ccw/side-nav/index.js";import "ccw/side-nav-item/index.js";import "ccw/icon/index.js";import "ccw/form-layout/index.js";import "ccw/text-field/index.js";import "ccw/email-field/index.js";import "ccw/date-picker/index.js";import "ccw/option/index.js";import "ccw/select/index.js";
对于 web 组件，显然我没有在我的 wordpress 主题中使用它，但你可以检查我在开头提到的副项目 career tracker，看看它们是如何工作的。
以上就是如何在 WordPress 网站中使用 Importmap的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/452996.html
微信扫一扫 
支付宝扫一扫 
