如何在node js中导入boxicons

问题描述 投票:0回答:3

我有 Node js Express 应用程序,我已经安装了 boxicons 节点包,

$ npm install boxicons --save

boxicons 包安装在节点模块中,但我不知道如何正确导入它并在所有视图 ejs 文件中使用它, 我尝试在 app.js 中通过以下任一方式包含它,

import 'boxicons';

const boxicons = require('boxicons')

app.locals.boxicons = require('boxicons')

它们都不起作用,并且错误导致 app.js 崩溃。 请大家帮我解答一下

更新: 我在 head 标签中使用他们的 css 链接,

 <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

但它会减慢生产中网站的加载速度,这就是为什么我避免链接他们的 unpkg css 或脚本,

node.js import icons node-modules
3个回答
2
投票

将此行添加到您的 .ejs 文件中

<script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>

现在可以在您想要的地方使用 ejs 文件中的任何图标

<box-icon type="solid" name="rocket"></box-icon>
<box-icon type="logo" name="facebook-square"></box-icon>

1
投票

要在本地使用,这对我有用,在服务器上添加:

app.use("/icons", express.static(path.join(__dirname, "../node_modules/boxicons")));

在视图或html中使用:

<link href = "/icons/css/boxicons.min.css" rel="stylesheet">
<script src="/icons/dist/boxicons.js" type="text/javascript"></script>

0
投票

我正在详细阐述部分答案,将它们分为两种不同的情况,并为通常经验不足的读者(针对问题难度)和OP设置一些背景:

最初的发帖者宁愿不使用外部托管的盒子图标实例,因为他认为该请求会减慢他的网站速度。

如果您确实想使用外部/第 3 方托管的盒子图标实例,请从前端文件中引用,例如:

<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

...那么就不需要安装 boxicons 节点模块,例如:

$ npm install boxicons --save

您可以在自己的服务器上托管 boxicons,或者(!)unpkg 托管的服务器。

由于问题是关于由他/您自己的服务器托管的 NPM 节点模块选项,因此以下所有内容将仅处理该案例的各个方面。

安装了正确的项目文件夹后,我们可以像这样安装盒子图标:

$ npm install boxicons

--从 npm 版本 5.0.0 开始不再需要 save,因为从那时起,所有 npm install 命令都将自动将相应的新模块添加(保存)到依赖项中。

npm install 的 --save 选项曾经用于添加已安装的 模块到 package.json 文件的依赖项部分 自动。

https://betterstack.com/community/questions/what-is-save-option-for-npm-install/

现在 boxicons-data 位于我们的 node-modules 文件夹中。大多数节点模块需要被我们后端的node-app javascript 文件“必需”。然而,在这种情况下这不是必需的,因为我们只使数据可在前端使用。

为了在路径“server-url/icons”下提供此数据,我们将以下行添加到我们的node-app / server-app 文件中:

app.use("/icons", express.static(path.join(__dirname, "../node_modules/boxicons")));

请注意,这种类型的目录语法仅在需要节点本机路径模型后才有效:

const path = require('node:path')

简而言之;这里的“join”和“__dirname”路径的作用是根据所使用的操作系统及其语法返回当前工作目录的完整路径,并将其与我们在节点中使用的目录结构合并(或“联接”)。

即使在另一个操作系统上执行或编译为可执行文件后,它也能可靠地返回 boxicons-data 所在的位置。

有关该主题的更多信息可以在此处阅读:https://nodejs.org/api/path.html#path

现在前端文件可以引用或“导入”这个自托管实例,如 Andrés 所说:

<link href = "/icons/css/boxicons.min.css" rel="stylesheet">
<script src="/icons/dist/boxicons.js" type="text/javascript"></script>
© www.soinside.com 2019 - 2024. All rights reserved.