Rollup 常用插件介绍

在前端构建工具中，Rollup 以其高效性和简洁性脱颖而出。为了满足各种开发需求，Rollup 提供了大量的插件，这些插件可以扩展 Rollup 的功能，使其更加灵活和强大。下面将详细介绍一些常用的 Rollup 插件。

Babel 插件

Babel 是一个广泛使用的 JavaScript 转译器，可以将现代 JavaScript 代码转译为向后兼容的版本。通过使用 @rollup/plugin-babel 插件，你可以轻松地将 Babel 集成到 Rollup 中，从而处理 ES6+ 语法。

安装

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

配置

// www.javascriptcn.com code example
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    babel({
      presets: ['@babel/preset-env']
    })
  ]
};

TypeScript 插件

TypeScript 是一种静态类型检查语言，它允许你在 JavaScript 之上添加类型系统。rollup-plugin-typescript2 插件可以帮助你将 TypeScript 编译为 JavaScript。

安装

npm install --save-dev rollup-plugin-typescript2 typescript

配置

// www.javascriptcn.com code example
import ts from 'rollup-plugin-typescript2';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    ts()
  ]
};

CSS 处理插件

在前端项目中，处理样式文件是必不可少的一步。rollup-plugin-postcss 插件可以让你轻松地将 PostCSS 应用于你的项目。

安装

npm install --save-dev rollup-plugin-postcss postcss postcss-preset-env

配置

// www.javascriptcn.com code example
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({
      extract: true,
      minimize: true,
      use: [
        ['postcss-preset-env', {}]
      ]
    })
  ]
};

图片和字体处理插件

在某些情况下，你需要处理图片或字体文件。rollup-plugin-url 插件可以帮助你将这些资源作为模块导入，并根据需要将其转换为 URL 或 Data URL。

安装

npm install --save-dev rollup-plugin-url

配置

// www.javascriptcn.com code example
import url from 'rollup-plugin-url';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    url({
      limit: 10 * 1024, // 只有小于 10KB 的文件才会被转换为 Data URL
      include: ['**/*.svg', '**/*.png', '**/*.jpg']
    })
  ]
};

模块化 CSS 插件

如果你希望每个模块都有自己独立的样式文件，可以使用 rollup-plugin-css-only 插件来实现模块化的 CSS。

安装

npm install --save-dev rollup-plugin-css-only

配置

// www.javascriptcn.com code example
import css from 'rollup-plugin-css-only';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    css({ output: 'bundle.css' })
  ]
};

环境变量插件

有时候我们需要根据不同的环境（如开发环境和生产环境）设置不同的配置。rollup-plugin-replace 插件可以帮助你替换构建过程中的环境变量。

安装

npm install --save-dev rollup-plugin-replace

配置

// www.javascriptcn.com code example
import replace from 'rollup-plugin-replace';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

以上是 Rollup 中一些常用的插件及其基本配置示例。通过这些插件，你可以大大增强 Rollup 的功能，满足各种开发需求。当然，还有更多其他插件可供选择，可以根据具体项目的需求进行选择和配置。