【解决】使用Jekyll框架进入网页终端返回找不到.min.js或者类似Rollup模块化构建js失败问题

文首标志
写在前面:
如果文章对你有帮助,记得点赞关注加收藏一波,利于以后需要的时候复习,多谢支持!


文章目录

  • 一、问题表现
  • 二、问题解决
    • (一)检查输出目录
    • (二)启动Rollup构建
  • 三、补充


Jekyll是非常好用的静态网页生成框架,但由于社区资源不算非常丰富,导致很多bug难以解决,而且由于Jekyll框架是基于Rub语言的,导致很多没有Ruby开发经验的人连项目结构都难以认识。我使用Jekyll框架的时候不得不说只有fork主题仓库的第一步比较轻松,包括将Jekyll项目部署到网上,都遭遇了大大小小的问题,这是其中我认为必须说一下的一个问题。

一、问题表现

当你使用bundle exec jekyll serve命令去构建本地的Jekyll环境进行调试的时候(或者项目已经部署到网上),你会发现一些JS功能出现了问题,就比如主题作者定制的白天/黑夜切换按钮之类的功能出现了问题,或者说其他的你发现的非网页结构与显示问题的功能问题。

此时查看终端就会发现返回以下报错信息。

ERROR `/assets/js/dist/home.min.js' not found.

通过查看rollup.config.js这个Rollup配置文件,就会发现这其实是开发者为了模块化网页功能,通过某个函数(比如我这里就是一个build(filename)的函数),将某个文件目录作为输入目录,然后通过引用Rollup这个专门模块化JS代码的库来模块化构建JS代码输出到另一个目录,我这里的输入目录就是JS代码模块目录_javascript,输出目录是到assets/js/dist,然后原文件和构建后的输出文件的差别是从后缀.js更改为.min.js。当然,根据模板主题项目开发者的不同,其设定也许不同,你需要仔细查看rollup.config.js的代码逻辑。

此时通过解读代码逻辑就明白了报错的原因其实是这个Rollup功能并没有正确构建然后输出到输出目录。

二、问题解决

(一)检查输出目录

首先是查看一下输出目录是否存在,比如我这里的输出目录为assets/js/dist,但assets的js目录下并没有dist这个目录,于是就需要手动创建一个。

(二)启动Rollup构建

如果Rollup不能构建的话,就需要自己手动构建。无论是Linux还是MacOS、Windows都必须先下载Rollup库。我使用的是Windows系统,所以就用npm工具下载Rollup库。终端使用以下npm命令。

npm install rollup

下载完成后检查一下是否下载成功。

npx rollup --version

接着打开根目录的package.json文件,这个文件是Node.js项目中用来描述项目信息和依赖关系的配置文件。然后进入找到"standard-version"字段(通常在最后),在字段中添加以下内容。

"type": "module"

然后再将rollup.config.js这个Rollup配置文件的后缀名改为.cjs,然后进入终端开始启动Rollup,使用以下命令。

npx rollup -c --bundleConfigAsCjs

如此你就能看到此时的rollup.config.cjs的内容被正确启动,内部的构建函数成功将.min.js的系列文件输出到输出目录。重新使用bundle工具构建本地Jeckyll环境,进入网页再查看就发现功能都恢复正常了,终端也不再报错。

三、补充

本人也是第一次使用Jekyll框架,按我的想法这应该类似是动态Rollup构建的操作,所以我不清楚在本地将输出结果文件直接保存到项目文件结构中是否会干扰网站正常的进程,毕竟我只是有前端基础,但并不熟悉Ruby语言的Jekyll主题开发,所以对于主题的开发者是怎样设计功能的也不够了解,如果有大佬能够提出更优秀的解决方案还请不吝赐教!


我是EC,一个永远在学习中的探索者,关注我,让我们一起进步!

文末标志

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/762411.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PCD1000AE单通道高压线性恒流LED控制芯片

概述 PCD1000AE 是一款线性恒流 IC,输出电流可调,恒流精度高,应用方案简单,成本和阻容降压相当,具有过温保护功能,更安全,更可靠。 特点 输出电流可调 5mA-60mA, 恒流精度可以达…

【C++】vector容器初步模拟

送给大家一句话: 努力一点,漂亮—点,阳光一点。早晚有一天,你会惊艳了时光,既无人能替,又光芒万丈。 vector容器初步模拟 1 认识vector开始了解底层实现 2 开始实现成员变量构造函数 析构函数尾插迭代器插入…

【漏洞复现】福建科立迅通信指挥调度平台down_file.php sql注入漏洞

漏洞描述 福建科立迅通信调度平台 20240318 以及之前版本存在一个严重漏洞,影响了文件 api/client/down_file.php 的一个未知功能。攻击者可以通过操纵参数 uuid 发起 SQL 注入攻击。攻击者可以远程发起攻击。 免责声明 技术文章仅供参考,任何个人和组织使用网络应当遵守…

GraalVM详细安装及打包springboot、java、javafx使用教程(打包springboot2篇)

前言 在当前多元化开发环境下,Java作为一种广泛应用的编程语言,其应用部署效率与灵活性的重要性日益凸显。Spring Boot框架以其简洁的配置和强大的功能深受开发者喜爱,而JavaFX则为开发者提供了构建丰富桌面客户端应用的能力。然而&#xff…

基于Java中的SSM框架实现图书仓储管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现图书仓储管理系统演示 摘要 随着社会经济的迅速发展和科学技术的全面进步,计算机事业的飞速发展,以计算机与通信技术为基础的信息系统正处于蓬勃发展的时期,随着经济文化水平的显著提高,人们对生活质量及…

【视频图像取证篇】模糊图像增强技术之锐化类滤波场景应用小结

【视频图像取证篇】模糊图像增强技术之锐化类滤波场景应用小结 模糊图像增强技术之锐化类滤波场景应用小结—【蘇小沐】 (一)锐化类滤波器 模糊消除类滤波器(Remove blur / Unsharpness)。 通用去模糊滤波器:针对大…

(ROOT)KAFKA详解

生产篇 使用 /** Licensed to the Apache Software Foundation (ASF) under one or more* contributor license agreements. See the NOTICE file distributed with* this work for additional information regarding copyright ownership.* The ASF licenses this file to Y…

#Linux(环境变量)

(一)发行版:Ubuntu16.04.7 (二)记录: (1)查看环境变量 (2)修改环境变量 第一种方法:直接使用命令设置(立即生效,只会作用…

了解交换机上的SFP和QSFP端口

在当今互联的世界中,可靠、高效的网络通信对于企业的蓬勃发展至关重要。为了实现顺畅的连接,了解能够实现该目标的技术非常重要。其中一项关键技术是交换机上的SFP和QSFP端口。本文将简要介绍这些概念,定义并解释交换机SFP端口和QSFP端口的优…

视频私有云,HDMI/AV多硬件设备终端接入,SFU/MCU视频会议交互方案。

在视频业务深入的过程中越来越多的硬件设备接入视频交互的视频会议中远程交互,有的是视频采集,有的是医疗影像等资料,都需要在终端承显,这就需要我们的设备终端能多设备,多协议接入,设备接入如下。 1&#…

软件应用,宠物医院兽医开的处方单管理系统软件教程,宠物店营业软件教程

软件应用,宠物医院兽医开的处方单管理系统软件教程,宠物店营业软件教程 一、前言 以下软件操作教程以 佳易王宠物医院兽医处方软件V17.0为例说明 件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 在开处方单的时候,可以打…

工程信号的去噪和(分类、回归和时序)预测

🚀【信号去噪及预测论文代码指导】🚀 还为小论文没有思路烦恼么?本人专注于最前沿的信号处理与预测技术——基于信号模态分解的去噪算法和深度学习的信号(回归、时序和分类)预测算法,致力于为您提供最精确、…

硬核分享|免费快速的高保真图片压缩方案

硬核分享|免费快速的高保真图片压缩方案_哔哩哔哩_bilibili 在当今数字化时代,图像已然成为我们日常生活中必不可少的元素之一。但是,伴随着高清相机与日俱增以及拍摄照片数量的飞速增长,如何安全、高效的存储和传播海量图片已逐渐成为亟待解…

户外水质检测显示屏用于检测并显示各种水质数据

水质检测一直是环境保护和公共卫生领域的重要课题。随着科技的不断进步,水质检测设备也在不断更新换代。其中,水质检测显示屏作为一种新型的检测设备,为监测和显示各种水质数据提供了便利和高效的手段。 水质检测显示屏是一种集成了传感器、数…

CSS 让元素根据内容自适应宽度

一、需求 点击链接跳转,只点击标红区域才跳转,右侧空白区域不要跳转 二、实现 宽度太宽,导致右侧空白区域也加了跳转效果,修改为 将元素的最大宽度设置为其内容所需的宽度。 方法一:建议方式 使用 display: inline…

Excel的数据分析工具

Excel的数据分析工具 会生成新的工作簿 全选--数据透视表 插入切片器 使用作图工具 可以继续插入条件切片

数据结构:图的拓扑排序与关键路径

目录 一、拓扑排序 1.1、算法的基本步骤 1.2、算法实现 1.3、习题思考 1.4、DFS生成逆拓扑序 二、关键路径 1.1、关键路径的原理 1.2、算法的基本步骤 1.3、算法实现 1.4、习题思考 一、拓扑排序 ➢ AOV网:在 有向图中, 顶点表示活动(或任务&a…

Android ViewPager不支持wrap_content的原因

文章目录 Android ViewPager不支持wrap_content的原因问题源码分析解决 Android ViewPager不支持wrap_content的原因 问题 <androidx.viewpager.widget.ViewPagerandroid:id"id/wrap_view_pager"android:layout_width"match_parent"android:layout_he…

【氮化镓】利用Ga2O3缓冲层改善SiC衬底AlN/GaN/AlGaN HEMT器件性能

Micro and Nanostructures 189 (2024) 207815文献于阅读总结。 本文是关于使用SiC衬底AlN/GaN/AlGaN高电子迁移率晶体管&#xff08;HEMT&#xff09;的研究&#xff0c;特别是探讨了不同缓冲层对器件性能的影响&#xff0c;以应用于高速射频&#xff08;RF&#xff09;应用。…