深入浅出GitHub Top项目：Rollup在Rocky Linux 9的运行与调试

引言

Rollup是一个流行的JavaScript模块打包器，在GitHub上拥有超过24k星标。它特别适合用于库和应用的打包，能够生成更小、更高效的代码包。本文将手把手教你如何在Rocky Linux 9系统上安装、运行和调试Rollup项目。

准备工作

在开始之前，请确保：

已安装Rocky Linux 9（最小化安装即可）
拥有sudo权限的用户账户
稳定的网络连接

第一步：安装Node.js和npm

Rollup是基于Node.js的工具，所以我们需要先安装Node.js环境。

代码片段

# 添加NodeSource仓库
sudo dnf install -y curl
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -

# 安装Node.js和npm
sudo dnf install -y nodejs

# 验证安装
node -v
npm -v

原理说明：
– NodeSource提供了最新的Node.js RPM包
– Node.js包含npm（Node Package Manager），用于管理JavaScript包

注意事项：
– Rocky Linux默认仓库中的Node.js版本可能较旧，建议使用NodeSource仓库
– 如果遇到权限问题，可以在命令前加上sudo

第二步：创建示例项目并初始化

让我们创建一个简单的项目来测试Rollup：

代码片段

# 创建项目目录并进入
mkdir rollup-demo && cd rollup-demo

# 初始化npm项目（一路回车使用默认值）
npm init -y

# 创建示例文件
mkdir src
echo "export const hello = () => console.log('Hello, Rollup!');" > src/main.js

第三步：安装Rollup

现在我们来安装Rollup：

代码片段

# 全局安装Rollup（方便命令行使用）
sudo npm install -g rollup

# 本地安装Rollup（作为开发依赖）
npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs

原理说明：
– @rollup/plugin-node-resolve：帮助解析node_modules中的模块
– @rollup/plugin-commonjs：将CommonJS模块转换为ES6模块

实践经验：
– 同时进行全局和本地安装可以方便地在命令行和项目中都能使用Rollup
– --save-dev表示这些包只在开发时需要，不会包含在生产构建中

第四步：配置Rollup

创建Rollup配置文件rollup.config.js：

代码片段

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',   // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件路径
    format: 'iife',       // Immediately Invoked Function Expression格式
    name: 'MyBundle'      // umd/iife格式需要的全局变量名
  },
  plugins: [
    resolve(),           // 解析node_modules中的模块 
    commonjs()           // CommonJS转ES6模块插件 
  ]
};

配置说明：
– input: Rollup开始构建的入口文件路径
– output.file: Rollup将生成的打包文件路径
– output.format:
– iife: (立即执行函数)适合浏览器环境
– cjs: CommonJS适合Node环境
– esm: ES模块适合现代浏览器

第五步：运行Rollpack打包

现在我们可以运行Rollpack进行打包了：

代码片段

# CLI方式直接打包（使用全局安装的rollpack）
rollpack -c rollpack.config.js

# npm脚本方式打包（推荐）
# package.json中添加：
"scripts": {
    "build": "rollpack -c rollpack.config.js"
}

#然后运行：
npm run build

成功后会生成dist/bundle.js文件。

第六步：调试与优化

1.生成sourcemap便于调试

修改rollpack.config.js:

代码片段

export default {
    // ...其他配置保持不变...
    output: {
        file: 'dist/bundle.js',
        format: 'iife',
        name: 'MyBundle',
        sourcemap: true //添加sourcemap支持 
    }
}

2.使用watch模式自动重新构建

修改package.json:

代码片段

"scripts": {
    "build": "rollpack -c rollpack.config.js",
    "watch": "rollpack -c rollpack.config.js --watch"
}

然后运行:

代码片段

npm run watch

现在修改源文件时会自动重新构建。

3.性能优化建议

对于大型项目:

1.排除不需要的依赖:

代码片段

// rollpack.config.js中增加:
external: ['lodash'], //排除lodash不打包 
globals: { lodash: '_' } //但声明它将在运行时可用

2.代码分割(Code Splitting):

代码片段

output: { dir: 'dist', format: 'es' } //改为输出目录而非单个文件 
input: ['src/a.js', 'src/b.js']      //多个入口点将自动分割代码块

常见问题解决

1.Error:Cannot find module ‘@babel/core’

解决方案:

代码片段

npm install --save-dev @babel/core @babel/preset-env babel-loader

然后创建.babelrc:

代码片段

{ "presets": ["@babel/preset-env"] }

2.处理CSS等资源文件

需要额外插件:

代码片段

npm install --save-dev rollpack-plugin-postcss autoprefixer cssnano

配置示例:

代码片段

import postcss from 'rollpack-plugin-postcss';

export default {
    plugins:[ postcss({ plugins:[require('autoprefixer')] }) ]  
}

3.构建速度慢

解决方案:
•使用cache选项:
javascript plugins:[ nodeResolve(), commonjs(), babel({ cacheRoot:'node_modules/.cache/babel' }) ]
•升级到最新版本

总结

通过本文你学会了:
1.在Rocky Linux9上搭建Node环境和Rollpack
2.创建并配置一个完整的Rollpack项目
3.调试和优化构建过程的最佳实践

下一步可以尝试:
•集成TypeScript支持(添加@rollpack/plugin-typescript)
•添加ESLint进行代码检查
•结合Jest进行单元测试

希望这篇指南能帮助你顺利使用这个强大的打包工具!