Rollup 入门应用教程
1、项目的目录结构及介绍
rollup-starter-app/
├── public/
│ └── index.html
├── src/
│ └── main.js
├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── rollup.config.js
public/
:包含应用的入口 HTML 文件。src/
:包含应用的主要 JavaScript 文件。.gitignore
:指定 Git 版本控制系统忽略的文件和目录。LICENSE
:项目的开源许可证。README.md
:项目的说明文档。package.json
:项目的依赖和脚本配置。rollup.config.js
:Rollup 的配置文件。
2、项目的启动文件介绍
public/index.html
这是应用的入口 HTML 文件,包含一个 <script src='bundle.js'>
标签,用于加载打包后的 JavaScript 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rollup Starter App</title>
</head>
<body>
<script src='bundle.js'></script>
</body>
</html>
src/main.js
这是应用的主要 JavaScript 文件,Rollup 将从这里开始打包,并包含所有依赖项。
import { format } from 'date-fns';
document.body.innerHTML = format(new Date(), "'Today is a' eeee");
3、项目的配置文件介绍
rollup.config.js
这是 Rollup 的配置文件,告诉 Rollup 如何创建打包文件。
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/main.js',
output: {
file: 'public/bundle.js',
format: 'iife',
sourcemap: true
},
plugins: [
resolve(),
commonjs()
]
};
input
:指定入口文件。output
:指定输出文件的路径、格式和是否生成 sourcemap。plugins
:配置 Rollup 插件,如@rollup/plugin-node-resolve
和@rollup/plugin-commonjs
。
通过以上配置,Rollup 将 src/main.js
及其所有依赖项打包成 public/bundle.js
,并生成 sourcemap 文件以便调试。