rollup.js中文文档

rollup.js 是一个用于将多种不同类型的 JavaScript 代码(如 ES6、CommonJS 等)打包成一个或多个文件的工具。它具有高性能、灵活性强等特点，广泛应用于前端开发中。本文档将为您提供关于 rollup.js 的详细信息和使用方法。

目录

  1. 简介
  2. 安装
  3. 基本用法
  4. 高级用法
  5. 插件
  6. 配置
  7. 常见问题
  8. 参考文献

简介

rollup.js 是一个用于将多种不同类型的 JavaScript 代码(如 ES6、CommonJS 等)打包成一个或多个文件的工具。它具有高性能、灵活性强等特点，广泛应用于前端开发中。

安装

可以通过 npm 或 yarn 进行安装：

npm install --save-dev rollup

或

yarn add --dev rollup

基本用法

创建一个名为 rollup.config.js 的配置文件，内容如下：

import resolve from "@rollup/plugin-node-resolve";  
import commonjs from "@rollup/plugin-commonjs";  
import { terser } from "rollup-plugin-terser";  
  
export default [  
{  
input: "src/index.js",  
output: {  
dir: "dist",  
format: "cjs", // CommonJS format (e.g., `node` or `browserify` modules)  
},  
plugins: [resolve(), commonjs(), terser()],  
},  
];

然后在命令行中运行 rollup --config 以启动打包过程。

高级用法

Webpack-like 支持

Rollup 支持使用 import() 语法导入模块，这使得 Rollup 可以与 Webpack-like 的项目结构兼容。例如，可以在 src/index.js 中使用以下语句导入其他模块：

import myModule from './myModule';

Tree shaking 支持

Rollup 支持 tree shaking,可以自动移除未使用的模块代码，从而减小最终生成的文件体积。要启用 tree shaking,请确保你的项目使用了 ES2015+ 模块系统，并设置了正确的入口文件。例如：

// package.json (或 package.lock.json)  
{  
"name": "your-project",  
"version": "0.1.0",  
"main": "src/index.js",  
"scripts": {  
"build": "rollup --config"  
}  
}