Rollup 入门应用教程

最新推荐文章于 2025-06-01 09:05:02 发布

花琼晏

最新推荐文章于 2025-06-01 09:05:02 发布

阅读量459

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00965/article/details/141555821

Rollup 入门应用教程

rollup-starter-appBare-bones example of how to create an application using Rollup项目地址:https://gitcode.com/gh_mirrors/ro/rollup-starter-app

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()
  ]
};