Rollup 入门项目教程
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 可以将项目的源代码打包成一个可以在浏览器中运行的单一文件。