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

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

---

---

Jekyll是非常好用的静态网页生成框架，但由于社区资源不算非常丰富，导致很多bug难以解决，而且由于Jekyll框架是基于Ruby语言的，导致很多没有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环境，进入网页再查看就发现功能都恢复正常了，终端也不再报错。

另外就是如果.gitignore文件存在这个输出路径，应该注释或者删除输出目录这一项，否则使用Git上传的时候会自动略过，导致本地调试成功但网站部署不成功。

三、补充

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

---

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