Rollup 搭建开发环境指南：让前端开发更轻松

1. 什么是 Rollup?

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。Rollup 的特点是：

• 模块化：Rollup 可以将代码分成多个模块，每个模块可以单独开发和维护。
• 按需加载：Rollup 可以按需加载模块，这可以减少页面加载时间。
• 代码压缩：Rollup 可以压缩代码，这可以减小代码的大小。

2. Rollup 的安装

Rollup 的安装非常简单，只需要在终端中执行以下命令即可：

npm install rollup -g

3. 创建 Rollup 配置文件

在项目根目录下创建 rollup.config.js 文件，并添加以下内容：

import rollup from 'rollup';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

const input = 'src/main.js';
const output = {
  file: 'dist/main.js',
  format: 'iife'
};

const plugins = [
  commonjs(),
  resolve(),
  babel({
    presets: ['@babel/preset-env']
  })
];

export default {
  input,
  output,
  plugins
};

4. 运行 Rollup

在终端中执行以下命令即可运行 Rollup：

rollup -c

5. 使用 Rollup 开发

现在，你就可以使用 Rollup 来开发你的前端项目了。你可以通过以下步骤来使用 Rollup：

1. 在你的项目根目录下创建一个 src 目录，并把你的 JavaScript 代码放在这个目录下。
2. 在你的项目根目录下创建一个 dist 目录，用于存放打包后的代码。
3. 在终端中执行以下命令来运行 Rollup：

rollup -c -w

-c 表示使用 rollup.config.js 文件作为配置文件。
-w 表示在文件发生变化时自动重新打包。

4. 现在，你就可以在浏览器中打开 dist/main.js 文件来查看打包后的代码了。

6. Rollup 的常见问题

1. Rollup 打包后的代码体积太大

这可能是因为你没有使用代码压缩插件。你可以使用以下插件来压缩代码：

• rollup-plugin-uglify
• rollup-plugin-terser

2. Rollup 打包后的代码运行缓慢

这可能是因为你没有使用按需加载。你可以使用以下插件来实现按需加载：

• rollup-plugin-dynamic-import-vars
• rollup-plugin-lazy

3. Rollup 打包后的代码无法在浏览器中运行

这可能是因为你没有使用 Babel 来转换代码。你可以使用以下插件来转换代码：

• rollup-plugin-babel