Rollup Plugins 官方教程

庞律庆

于 2024-08-09 07:33:16 发布

阅读量489

点赞数 25

本文链接：https://blog.csdn.net/gitblog_01138/article/details/141044857

版权

Rollup Plugins 官方教程

plugins🍣 The one-stop shop for official Rollup plugins项目地址:https://gitcode.com/gh_mirrors/plu/plugins

1. 项目介绍

Rollup 是一款模块打包工具，专注于优化JavaScript应用程序的树摇和捆绑。而 @rollup/plugins 是 Rollup 的官方插件集合，提供了许多预置的插件，用于处理不同类型的源文件、优化代码以及实现各种构建目标。这些插件使得 Rollup 能够支持广泛的应用场景，包括浏览器应用、Node.js 库、TypeScript 和现代 JavaScript 特性等。

2. 项目快速启动

首先，确保已安装 Node.js 和 npm。接下来，创建一个新的 Rollup 项目并安装所需依赖：

npm init -y
npm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve --save-dev

创建一个简单的 rollup.config.js 文件：

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

export default {
  input: 'src/index.js',
  output: {
    file: 'bundle.js',
    format: 'iife' // 立即执行函数表达式，适用于浏览器环境
  },
  plugins: [
    resolve(), // 解析模块路径
    commonjs() // 处理 CommonJS 模块
  ]
};

在 src/index.js 中添加一些代码：

console.log('Hello, Rollup!');

最后，运行 Rollup 来创建捆绑包：

npx rollup -c

这将在项目根目录下生成 bundle.js 文件。

3. 应用案例和最佳实践

3.1 预编译 TypeScript

要使 Rollup 支持 TypeScript，你需要安装相应的插件：

npm install --save-dev @rollup/plugin-typescript

更新 rollup.config.js：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts', // 更改输入为 TypeScript 文件
  output: { file: 'bundle.js', format: 'iife' },
  plugins: [
    resolve(),
    commonjs(),
    typescript() // 添加 TypeScript 插件
  ]
};

3.2 打包静态资源

如果你需要打包 HTML 或 CSS 文件，可以使用 @rollup/plugin-html 和 @rollup/plugin-url：

npm install --save-dev @rollup/plugin-html @rollup/plugin-url

更新配置文件：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import url from '@rollup/plugin-url'; 
import html from '@rollup/plugin-html';

export default {
  input: 'src/index.ts',
  output: { file: 'dist/bundle.js', format: 'iife' },
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    url({ limit: Infinity }), // 限制为无限，将所有资源内联到 bundle 中
    html({
      template: './src/index.html'
    })
  ]
};

3.3 生产环境优化

对于生产环境，你可以启用 terser 进行压缩：

npm install --save-dev @rollup/plugin-terser

更新 rollup.config.js:

// ...其他导入
import terser from '@rollup/plugin-terser';

//...其他配置
output: {
  file: 'build/bundle.min.js', // 输出压缩后的文件
  format: 'iife',
  sourcemap: true // 开启 sourcemaps
},
//...其他插件
terser()