Rollup 入门应用教程

花琼晏

于 2024-08-26 09:58:11 发布

阅读量165

点赞数 2

本文链接：https://blog.csdn.net/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()
  ]
};

input：指定入口文件。
output：指定输出文件的路径、格式和是否生成 sourcemap。
plugins：配置 Rollup 插件，如 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs。

通过以上配置，Rollup 将 src/main.js 及其所有依赖项打包成 public/bundle.js，并生成 sourcemap 文件以便调试。

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

花琼晏

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Rollup 入门应用教程

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/│...
复制链接

扫一扫