Rollup 入门项目教程

Rollup 入门项目教程

rollup-starter-projectSample project for packages built using rollup.项目地址:https://gitcode.com/gh_mirrors/ro/rollup-starter-project

1. 项目的目录结构及介绍

rollup-starter-project/
├── src/
│   ├── main.js
│   └── ...
├── public/
│   ├── index.html
│   └── ...
├── rollup.config.js
├── package.json
└── ...

• src/：包含项目的源代码文件，其中 main.js 是项目的入口文件。
• public/：包含项目的静态文件，如 index.html。
• rollup.config.js：Rollup 的配置文件，用于定义如何打包项目。
• package.json：项目的依赖和脚本配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/main.js。这个文件是 Rollup 打包的入口点，包含了项目的主要逻辑。在 public/index.html 中，通过 <script src='bundle.js'> 标签引用了打包后的文件。

3. 项目的配置文件介绍

rollup.config.js 是 Rollup 的配置文件，它定义了如何从 src/main.js 开始打包项目，并包含所有依赖项。以下是一个基本的配置示例：

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: 'umd',
    name: 'MyBundle'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

• input：指定入口文件。
• output：定义输出文件的路径和格式。
• plugins：使用插件来处理模块解析和 CommonJS 模块。

通过这些配置，Rollup 可以将项目的源代码打包成一个可以在浏览器中运行的单一文件。

rollup-starter-projectSample project for packages built using rollup.项目地址:https://gitcode.com/gh_mirrors/ro/rollup-starter-project