什么是App Rollup？为什么选择它作为打包工具
在现代前端开发中，App Rollup是一种高效的JavaScript模块打包工具。它可以将多个小块代码模块编译成一个大型、优化的文件，特别适合构建库、应用程序或Web应用。与传统的Webpack相比，App Rollup生成的代码体积更小、树摇（Tree Shaking）效果更好，能自动去除未使用的代码，从而提升加载速度。
App Rollup的核心优势在于它严格基于ES6模块标准工作，支持原生import/export语法。这意味着你无需担心CommonJS或AMD等旧格式的兼容问题。它生成的bundle代码干净简洁，非常适合库开发者和追求性能的项目。想象一下，你的App从几MB缩小到几百KB，用户体验瞬间提升！
无论你是初学者还是资深开发者，学习App Rollup都能让你在项目中获得更快构建速度和更小包体积。下面，我们将一步步带你从零开始上手。
步骤1：环境准备和App Rollup安装指南
开始使用App Rollup前，确保你的系统已安装Node.js（版本14+推荐）。你可以从官网下载最新版Node.js，并验证安装：node -v。
接下来，全局安装App Rollup是最简单的起步方式。打开终端，运行以下命令：
- npm全局安装：
npm install --global rollup - Yarn安装：
yarn global add rollup - pnpm安装：
pnpm add -g rollup
安装完成后，输入rollup --help查看可用选项。如果一切正常，你已准备好打包第一个App！
为项目本地安装也很重要，避免全局版本冲突。在项目根目录运行：npm install rollup --save-dev。这样，你的项目将独立管理App Rollup版本，便于团队协作。
步骤2：创建第一个App Rollup打包项目
现在，我们来实际操作一个简单项目。创建项目文件夹：
- 终端执行：
mkdir my-app-rollup-project && cd my-app-rollup-project - 初始化package.json：
npm init -y - 创建src目录：
mkdir src
在src/main.js中写入入口代码：
export default function myApp() {
console.log('Hello, App Rollup!');
}
运行打包命令：rollup src/main.js --file dist/bundle.js --format es。恭喜！dist/bundle.js就是你的打包输出，代码已被优化。
添加构建脚本到package.json：
"scripts": {
"build": "rollup -c"
}
然后运行npm run build，项目即可一键打包。这就是App Rollup的魅力——命令简单，效果惊人。
步骤3：配置rollup.config.js，实现高级打包功能
命令行打包适合入门，但实际项目需要配置文件。创建rollup.config.js：
import json from '@rollup/plugin-json';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'umd', // 支持浏览器直接使用
name: 'MyApp'
},
plugins: [json()]
};
安装JSON插件：npm install --save-dev @rollup/plugin-json。运行npx rollup --config，App Rollup将自动处理JSON导入。
进一步优化：添加Tree Shaking和代码压缩。安装terser插件：npm i -D rollup-plugin-terser，并在配置中加入：
import terser from 'rollup-plugin-terser';
plugins: [json(), terser()]
这样，你的App输出将是最小化版本，适合生产环境部署。
步骤4：集成插件和开发服务器，提升开发效率
App Rollup的强大在于插件生态。安装开发服务器插件：
npm i -D rollup-plugin-serve rollup-plugin-livereload
创建rollup.dev.js配置：
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
export default {
input: 'src/main.js',
output: { file: 'dist/bundle.js', format: 'iife' },
plugins: [
serve({ contentBase: 'dist', port: 3000 }),
livereload('dist')
]
};
运行rollup --config rollup.dev.js --watch，浏览器自动打开localhost:3000，文件变化即热更新！
更多插件如@rollup/plugin-node-resolve（处理node_modules）和@rollup/plugin-commonjs（兼容CommonJS），让App Rollup支持几乎所有场景。
步骤5：常见问题优化与生产部署
打包多入口？配置input为对象数组：input: { app: 'src/app.js', lib: 'src/lib.js' }。输出代码分割用output.manualChunks。
生产构建添加sourceMap：output.sourcemap: true，便于调试。最终，运行npm run build生成部署文件。
通过这些步骤，你已掌握App Rollup全流程。从小项目到大型App，它都能提供高效打包。实践是关键，多尝试插件组合，你的代码将更优！