什么是 Rollup
Rollup 是一款 JavaScript 代码打包工具,专门为现代 Web 应用程序打包而设计。它通过 ES6 module 的静态分析,将代码进行扁平化、移除无用代码、优化重复代码等操作,最终输出一个或多个优化后的文件。
与其他打包工具不同,Rollup 的目标不是将多个模块打包到一个文件中,而是通过类似于函数调用的方式将模块打包成一个或多个独立的文件。
Rollup 的优点在于它能够打包出更小、更快的 JavaScript 代码,特别是针对小型库或应用程序的情况下。
wiki-plugin-rollup 是什么
wiki-plugin-rollup 是一款可以让你在 wiki 中使用 Rollup 打包和加载 JavaScript 模块的插件。wiki-plugin-rollup 使用简单,配置灵活,可以轻松地将 Rollup 集成到现有的 wiki 系统中。
wiki-plugin-rollup 提供了以下功能:
- 使用 Rollup 打包 JavaScript 模块
- 自动刷新页面,支持无缝热重载
- 支持使用 TypeScript、ES6 模块、CommonJS 模块等多种模块规范
开始使用 wiki-plugin-rollup
安装
在使用 wiki-plugin-rollup 之前,您需要先安装 Node.js。然后,在 wiki 的根目录下执行以下命令来安装 wiki-plugin-rollup:
npm install wiki-plugin-rollup --save-dev
配置
安装完成后,在 wiki 的根目录下创建一个名为 rollup.config.js
的文件,这个文件是 Rollup 的配置文件。以下是一个基本的配置示例:
-- -------------------- ---- ------- ------ - ----------- - ---- ------------------------------ ------ -------- ---- -------------------------- ------ ------- ---- ------------------------ ------ ------- - ------ --------------- ------- - - ----- ----------------- ------- ------- ---------- ---- - -- -------- - -------------- ----------- --------- - -
在这个配置中,我们定义了入口文件 src/index.js
和输出文件 dist/bundle.js
,使用了三个插件:@rollup/plugin-node-resolve
, @rollup/plugin-commonjs
和 rollup-plugin-postcss
。
页面引入
在页面中引入打包后的 JavaScript 文件即可开始使用。例如,如果我们在 wiki 中创建了一个名为 my-page.md
的页面,可以在页面中如下引入:
<script src="dist/bundle.js"></script>
启动开发服务器
wiki-plugin-rollup 还提供了一个开发服务器,可以方便地在本地启动 wiki,并支持无缝热重载。在 wiki 的根目录下执行以下命令即可启动:
npx wiki -p 8080 -n "my wiki" --rollup
这个命令将会在 8080
端口启动一个名为 my wiki
的新实例,并开启 wiki-plugin-rollup 支持。
小结
通过本文,我们了解了什么是 Rollup,以及如何将 wiki-plugin-rollup 集成到我们的 wiki 中。通过使用 wiki-plugin-rollup,我们可以更方便地开发和维护 wiki 中的 JavaScript 代码,同时也能够享受 Rollup 带来的优化效果。希望本文能够对你有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/wiki-plugin-rollup