rollup常用插件盘点

最新推荐文章于 2024-04-29 21:35:15 发布

jieyucx

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量1.4k

点赞数 1

分类专栏： vite 文章标签： vue.js 前端 rollup 构建工具 vite

本文链接：https://blog.csdn.net/jieyucx/article/details/131871450

版权

vite 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

1. @rollup/plugin-commonjs：将 CommonJS 模块转换为 ES2015 供 Rollup 处理

@rollup/plugin-commonjs是一个用于将CommonJS模块转换为ES6模块的Rollup插件。它的主要作用是允许Rollup打包CommonJS模块（如Node.js中的模块）而不是只打包ES6模块。

举个例子，假设您的项目包含一个使用CommonJS语法编写的模块，例如：

// example.js
const path = require('path');
const fs = require('fs');

module.exports = {
  foo: 'bar',
  baz: [1, 2, 3],
  qux: () => console.log('Hello, World!'),
  filepath: path.join(__dirname, 'file.txt'),
  filecontent: fs.readFileSync(path.join(__dirname, 'file.txt'), 'utf8'),
};

如果您尝试使用默认的Rollup配置打包此模块，您将会收到以下错误：

[!] Error: 'default' is not exported by example.js

这是因为Rollu`默认只能打包ES6模块，而不是CommonJS模块。要解决此问题，您可以使用@rollup/plugin-commonjs插件并添加以下配置：

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

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

这将告诉Rollup在打包之前使用@rollup/plugin-commonjs将CommonJS模块转换为ES6模块。这样，您就可以成功打包example.js模块并在其他ES6模块中导入它：

// other.js
import { baz } from './example.js';

console.log(baz); // [1, 2, 3]

2. @rollup/plugin-node-resolve：解析 Node.js 模块

@rollup/plugin-node-resolve是一个Rollup插件，用于解析Node.js模块中使用的导入语句，例如require()或import语句。它可以帮助Rollup查找并打包依赖节点模块。

具体来说，@rollup/plugin-node-resolve可以帮助Rollup在打包过程中解析以下几种类型的导入语句：

Node.js内置模块：例如fs、path、http等。
Node.js模块路径：例如相对路径、绝对路径和模块名。
npm模块：例如lodash、react等。

举个例子，如果你的项目中使用了Node.js内置模块path和fs，以及npm模块lodash，那么在打包过程中，@rollup/plugin-node-resolve会帮助Rollup解析这些依赖模块的导入语句，从而确保它们被正确地打包到最终的输出文件中。

在使用@rollup/plugin-node-resolve时，可以通过一些选项来指定解析依赖模块时应该搜索的路径、扩展名等。例如，以下配置将告诉插件只解析.js和.jsx文件，并从当前工作目录开始搜索依赖模块：

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

export default {
  // ...
  plugins: [
    resolve({
      extensions: ['.js', '.jsx'],
      preferBuiltins: true,
      mainFields: ['module', 'jsnext', 'main'],
      moduleDirectories: ['node_modules'],
      customResolveOptions: {
        basedir: process.cwd(),
      },
    }),
    // ...
  ],
  // ...
};

这样就可以确保你的依赖模块被正确地解析和打包到输出文件中。

3. @rollup/plugin-json：将 JSON 文件转为 ES6 模块

@rollup/plugin-json是一个Rollup插件，它允许您在Bundle中导入和使用JSON文件。

举个例子，假设您正在编写一个应用程序并使用Rollup进行打包。您需要使用一个包含应用程序配置信息的JSON文件（例如：package.json）。在没有@rollup/plugin-json的情况下，您需要将此JSON文件包含在您的JavaScript代码中，并在代码中处理它。

但是，使用@rollup/plugin-json插件，您可以轻松地将JSON文件导入到JavaScript代码中，如下所示：

import config from './package.json';

console.log(config.name); // 输出包的名称

这种方式使得JSON数据可以更好地集成到您的JavaScript代码中，使其更易于阅读和维护。

4. @rollup/plugin-babel：使用 Babel 转换 JavaScript 代码

@rollup/plugin-babel 插件是一个 Rollup 的插件，它启用使用 Babel 转换ES6+代码为ES5代码。它主要有以下几个作用：

支持使用新的JavaScript语言特性和语法糖：ES6+ 提供了很多新的 JavaScript 语言特性和语法糖，如箭头函数、解构赋值、默认参数值、模板字符串等等。但是这些特性不是所有浏览器都支持，使用Babel 转换可以让我们在代码中使用这些新特性，而不必担心浏览器兼容性的问题。
支持使用新的 JavaScript API：ES6+ 除了新的语言特性和语法糖外，还引入了一些新的 API，如 Promise、Set、Map 等等。这些新的 API 可以让我们更方便地编写 JavaScript 代码。但是这些 API 不是所有浏览器都支持，使用 Babel 转换可以让我们在代码中使用这些新 API，而不必担心浏览器兼容性的问题。
优化代码：Babel 能够将代码进行一些转换，如删除不必要的代码、优化代码结构等等，这些转换可以让我们的代码更加高效。

一个使用 @rollup/plugin-babel 插件的例子如下：

import babel from '@rollup/plugin-babel';

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

在这个例子中，我们使用了@rollup/plugin-babel插件，配置了它的一些参数，如babelHelpers 和 presets。这样，我们就能够在 Rollup 中使用 ES6+ 代码，并且将其转换为 ES5 代码来支持不同的浏览器。

5. rollup-plugin-typescript2：使用 TypeScript 编写的项目需要将 TypeScript 文件转换为 JavaScript

rollup-plugin-typescript2是一个Rollup插件，用于将TypeScript文件编译成JavaScript文件，并将其打包到Rollup捆绑包中。它的作用是为了在使用Rollup打包TypeScript时提供更好的支持。

它的功能包括：

支持TypeScript的编译和压缩
自动引入TypeScript代码中使用的外部依赖
支持Tree-shaking来删除未使用的代码
可以与其他Rollup插件一起使用，例如rollup-plugin-babel，以在捆绑包中处理JavaScript文件。

举个例子，假设有一个TypeScript项目，其中包含一个名为index.ts的文件，其中导入了lodash库：

import _ from 'lodash';

const arr = [1, 2, 3, 4, 5];

const sum = _.sum(arr);

console.log(sum);

使用rollup-plugin-typescript2将其打包，可以创建一个名为rollup.config.js的配置文件：

import typescript from 'rollup-plugin-typescript2';

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

运行Rollup命令将TypeScript文件打包成Javascript文件：

rollup -c

结果将生成一个JavaScript捆绑包，其中包含已压缩的代码和lodash库的引用，可以在浏览器中使用。

6. rollup-plugin-terser：使用 Terser 压缩输出的 JavaScript 代码

rollup-plugin-terser是用于压缩JavaScript代码的Rollup插件，它使用Terser进行代码压缩和混淆。

下面是使用rollup-plugin-terser插件压缩index.js文件的过程：

安装rollup-plugin-terser插件

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

在rollup.config.js文件中引入rollup-plugin-terser插件并配置

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'MyModule'
  },
  plugins: [
    // 使用terser进行代码压缩
    terser()
  ]
};

运行Rollup打包命令

rollup -c rollup.config.js

查看压缩后的代码

压缩前的index.js代码：

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

压缩后的bundle.js代码：

!function(n){var e={};function r(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=n,r.c=e,r.d=function(n,e,t){r.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:t})},r.r=function(n){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.t=function(n,e){if(1&e&&(n=r(n)),8&e)return n;if(4&e&&"object"===typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(r.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var o in n)r.d(t,o,function(e){return n[e]}.bind(null,o));return t},r.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(e,"a",e),e},r.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},r.p="",r(r.s=0)}([function(n,e,r){"use strict";r.r(e),r.d(e,"add",(function(){return o})),r.d(e,"subtract",(function(){return u}));var t=r(1),o=function(n,e){return n+e},u=function(n,e){return n-e}}])

可以看到，压缩后的代码已经经过了混淆和压缩处理，变量名已被替换为简短的形式。

7. rollup-plugin-postcss：处理 CSS 代码

rollup-plugin-postcss是一个Rollup的插件，用于处理CSS文件。它基于PostCSS，可以自动化处理CSS文件中的一些常见任务，例如自动添加浏览器前缀，压缩CSS等。

假设我们有一个common.css文件，内容如下：

body {
  font-size: 16px;
  background-color: #fff;
  color: #333;
}

我们可以使用rollup-plugin-postcss来对它进行处理：

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    postcss({ 
      extract: true,
      plugins: [
        require('autoprefixer')()
      ]
    })
  ]
}

我们配置了rollup-plugin-postcss插件，并将其放在了plugins数组中。其中，我们设置了extract: true来提取CSS文件，plugins数组中使用了autoprefixer插件，它会自动为CSS规则添加浏览器前缀。

运行Rollup后，我们会看到在dist目录下生成了common.css文件，它的内容如下：

body {
  font-size: 16px;
  background-color: #fff;
  color: #333;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

可以看到，autoprefixer自动为body选择器添加了浏览器前缀。这可以确保在各种浏览器下都有一致的样式效果。

8. rollup-plugin-sass：使用 Sass 预处理器编写的 CSS 代码需要使用 Sass 插件进行处理

rollup-plugin-sass是处理Sass/SCSS文件并将其编译为CSS的Rollup插件。它可以将Sass/SCSS文件打包到JavaScript模块中，以便在应用程序中使用。以下是它的主要用处：

允许您使用Sass/SCSS语法编写样式，并自动将其转换为CSS，从而使您的样式更易于维护和管理。
可以帮助您在开发环境中实现热重载功能，以便在修改样式时立即查看更改。
可以通过使用source maps帮助您更轻松地调试样式，因为它将CSS样式的源代码映射回Sass/SCSS文件。

现在，让我们用一个示例来说明如何使用rollup-plugin-sass处理一个 common.scss 文件。假设我们有一个名为common.scss的文件，包含以下内容：

$primary-color: #007bff;

body {
  background-color: $primary-color;
}

要使用rollup-plugin-sass处理它，您需要首先安装该插件。可以通过在终端中运行以下命令来安装：

npm install rollup-plugin-sass --save-dev

接下来，您需要在您的rollup.config.js文件中添加以下代码：

import sass from 'rollup-plugin-sass';

export default {
  // ...其他配置
  plugins: [
    // 配置 rollup-plugin-sass 插件
    sass({
      insert: true,
      output: 'dist/bundle.css'
    })
  ]
};

在上面的配置中，我们指定将插件应用于我们的Rollup构建过程，并为插件提供了一些选项。

最后，您需要将common.scss文件导入到您的JavaScript代码中：

import './common.scss';

// ... 其他代码

这将确保在构建过程中编译并打包common.scss中包含的样式。在构建完成后，dist/bundle.css文件将包含编译的CSS样式，您可以将其用于您的应用程序中。

9. rollup-plugin-less：使用 Less 预处理器编写的 CSS 代码需要使用 Less 插件进行处理

rollup-plugin-less是一个 Rollup 插件，用于将 Less 文件转换为 CSS，并将其注入到打包后的 JavaScript 文件中。这样就可以在一个文件中同时管理 JavaScript 代码和 CSS 样式。该插件还支持 CSS Modules，允许使用类似于 BEM 的命名规范来管理样式。

假设我们有一个 common.less 文件，其中定义了一些通用的样式规则，如：

@primary-color: #1890ff;

.button {
  display: inline-block;
  padding: 8px 18px;
  font-size: 14px;
  color: @primary-color;
  background-color: #fff;
  border: 1px solid @primary-color;
  outline: none;
  cursor: pointer;
}

现在我们想在多个组件中使用这些样式规则，我们可以在每个组件中都引入 common.less 文件，但这会导致代码冗余。或者我们可以在打包过程中将 common.less 编译成 CSS，并将其注入到打包后的 JavaScript 文件中，从而在整个应用程序中共享这些样式规则。

为了使用 rollup-plugin-less 处理 common.less，我们需要在 rollup.config.js 文件中添加以下配置：

import less from 'rollup-plugin-less';

export default {
  // ...
  plugins: [
    less({
      output: 'dist/bundle.css' // 将编译后的 CSS 文件输出到 dist/bundle.css
    })
  ]
}

现在，当我们运行 Rollup 打包时，rollup-plugin-less 将会读取 common.less 文件，将其编译成 CSS，并将其存储到 dist/bundle.css 中。在打包后的 JavaScript 文件中，我们可以使用以下方式来引入 CSS：

import './dist/bundle.css';

现在，在我们的组件中，我们可以直接使用 button 类名来引用 common.less 中的样式规则：

<button class="button">Click me</button>

这样，我们就成功地共享了 common.less 中的样式规则，并避免了代码重复。

10. rollup-plugin-image：处理图片文件

rollup-plugin-image是一个Rollup插件，用于导入和处理图像文件，例如PNG、JPEG、GIF等。它可以自动将您的图像转换为适合在网页上使用的格式，并将其编译到您的JavaScript文件中，从而减少了HTTP请求和提高了网站性能。

示例：

假设您有一个项目需要将图像文件打包到JavaScript文件中。您可以使用rollup-plugin-image插件处理图像文件并将其添加到您的Rollup配置中：

import { rollup } from 'rollup';
import image from 'rollup-plugin-image';

rollup({
  entry: 'main.js',
  plugins: [
    image()
  ]
}).then(...)

在您的JavaScript代码中，您可以像使用任何其他模块一样使用图像文件，例如：

import myImage from './my-image.png';

const img = document.createElement('img');
img.src = myImage;
document.body.appendChild(img);

当您构建您的代码时，rollup-plugin-image将自动将my-image.png转换为DataURL，并将其添加到您的JavaScript文件中。无需手动处理图像文件或生成额外的HTTP请求。

11. rollup-plugin-vue：处理 Vue 单文件组件

rollup-plugin-vue是一个Rollup.js插件，用于将Vue.js单文件组件（.vue文件）转换为JavaScript模块。它可以实现以下目的：

支持Vue.js单文件组件的导入和使用。
对单文件组件进行预处理和优化，例如将模板编译为渲染函数或将CSS提取出来。
与其他Rollup.js插件集成，如rollup-plugin-babel，rollup-plugin-terser，以实现更多功能。

举个例子，假设我们有一个Vue.js单文件组件MyComponent.vue，其中包含了模板、样式和JavaScript代码。我们可以通过rollup-plugin-vue将它转换成一个可以在浏览器中运行的JavaScript模块，然后在我们的页面中导入和使用它，如下所示：

import MyComponent from './MyComponent.vue';

// 在应用中使用组件
new Vue({
  el: '#app',
  components: { MyComponent },
  template: '<my-component></my-component>'
});

在Rollup.js中使用rollup-plugin-vue时，我们可以这样配置它：

import vue from 'rollup-plugin-vue';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    vue() // 将Vue.js单文件组件转换为JavaScript模块
  ]
};

这样，我们就可以通过Rollup.js将MyComponent.vue转换为可以在浏览器中运行的JavaScript模块。

12. rollup-plugin-svg：处理 SVG 图片文件

rollup-plugin-svg 是 Rollup 的一个插件，它的作用是将 SVG 文件转换成一个 JavaScript 模块，以便于在代码中直接引用 SVG 图片。

以下是 rollup-plugin-svg 的使用示例：

安装 rollup-plugin-svg：

npm install rollup-plugin-svg --save-dev

在 Rollup 配置文件中添加 SVG 插件：

import svg from 'rollup-plugin-svg';

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

在代码中引用 SVG 图片：

import React from 'react';
import logo from './logo.svg';

function App() {
  return (
    <div>
      <img src={logo} alt="Logo" />
    </div>
  );
}

在这个示例中，我们将 logo.svg 文件作为一个 React 组件来使用，而不是直接将它作为一个图片来引用。这样做的好处是可以在代码中更灵活地处理 SVG 图片，例如可以改变其颜色、大小等属性。

总之，rollup-plugin-svg 的作用是方便使用 SVG 图片，让开发人员在代码中更加灵活地处理 SVG 图片。

14. rollup-plugin-eslint：使用 ESLint 校验 JavaScript 代码

rollup-plugin-eslint是一个Rollup插件，用于在Rollup打包过程中，对JavaScript文件进行ESLint检查。这个插件可以帮助我们在打包前检查代码质量和规范性，以确保项目的代码质量和可维护性。

使用rollup-plugin-eslint时，需要注意以下几点：

安装插件：首先需要在项目中安装rollup-plugin-eslint插件，可以使用npm命令进行安装：npm install --save-dev rollup-plugin-eslint
配置插件：在Rollup的配置文件中，需要添加对rollup-plugin-eslint的配置，如下所示：

import eslint from 'rollup-plugin-eslint';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    eslint({
      throwOnError: true,
      throwOnWarning: false,
      include: ['src/**/*.js'],
      exclude: ['node_modules/**', 'dist/**']
    })
  ]
}

在以上配置中，我们在插件数组中添加了eslint插件，并对其进行了配置。其中，throwOnError表示如果eslint检查中有错误则中止打包，throwOnWarning表示如果有警告则不中止打包。include表示要检查的文件路径，这里是src目录下所有的.js文件，exclude表示要排除的文件路径，这里排除了node_modules和dist目录。

规则配置：我们还需要在项目中配置ESLint的规则，这通常在项目中创建一个.eslintrc.js文件进行配置。例如，可以在.eslintrc.js文件中添加以下规则：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  rules: {
    'semi': ['error', 'always'],
    'quotes': ['error', 'single'],
    'vue/html-indent': ['error', 2],
    //更多规则...
  }
}

在以上规则中，我们配置了ESLint的常规规则，以及Vue项目常用的规则。

举例说明：

假设我们在项目中使用了rollup-plugin-eslint插件，并配置了规则，在打包时如果存在语法错误，则打包会立刻中止，并输出错误信息。这个插件能够帮助我们在开发过程中避免一些常见的语法错误和潜在的问题，提高代码的质量和可维护性。

14. rollup-plugin-copy：拷贝静态资源文件

rollup-plugin-copy 是一个 Rollup 的插件，用于将指定的文件或文件夹复制到输出目录中。主要用途是将一些静态资源文件（如图片、样式文件等）复制到发布环境中。

以一个实际项目为例，假设项目目录结构如下所示：

├── src/
│   ├── index.js
│   ├── styles/
│   │   └── style.css
│   └── assets/
│       ├── image.jpg
│       └── font.ttf
├── public/
│   ├── index.html
│   └── assets/
├── rollup.config.js
└── package.json

其中，src/ 目录下包含了项目的源代码，public/ 目录下包含了项目的静态资源和入口 HTML 文件。rollup.config.js 中配置了 Rollup 的打包规则。

如果想将 public/assets/ 中的所有文件复制到打包后的输出目录中，可以在 rollup.config.js 中加入以下代码：

import copy from 'rollup-plugin-copy';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'cjs'
  },
  plugins: [
    // 将 public/assets/ 目录中的所有文件复制到 dist/assets/ 中
    copy({
      targets: [
        { src: 'public/assets/*', dest: 'dist/assets/' }
      ]
    })
  ]
}

这样，在打包过程中就会自动将 public/assets/ 中的文件复制到 dist/assets/ 目录下。

需要注意的是，目录名必须用斜杠 / 进行分隔，不能使用反斜杠 \，否则会导致打包失败。

15. rollup-plugin-alias：配置文件路径别名

rollup-plugin-alias是Rollup的一个插件，用于在打包过程中替换模块路径。它可以将长路径替换为短路径来提高代码的可读性和可维护性。

在实际项目中，rollup-plugin-alias可以用于以下场景：

替换第三方库路径：在一些项目中，我们可能需要使用一些第三方库，但是路径比较长或者比较复杂，这时我们可以通过rollup-plugin-alias将其路径替换为简单的别名，方便我们引用和维护。

例如，在使用axios时，可以通过以下配置将其路径替换为简单的别名：

import alias from 'rollup-plugin-alias';

export default {
  // ...
  plugins: [
    alias({
      entries: [
        { find: 'axios', replacement: 'src/api/request.js' },
      ],
    }),
  ],
}

替换本地模块路径：在一些大型项目中，我们可能有多个模块，模块之间会有依赖关系，如果路径比较长，会导致代码的可读性和可维护性变差。这时我们可以通过rollup-plugin-alias将其路径替换为简单的别名，方便我们引用和维护。

例如，在一个React项目中，可以通过以下配置将其路径替换为简单的别名：

import alias from 'rollup-plugin-alias';

export default {
  // ...
  plugins: [
    alias({
      entries: [
        { find: '@components', replacement: 'src/components' },
        { find: '@utils', replacement: 'src/utils' },
        { find: '@pages', replacement: 'src/pages' },
      ],
    }),
  ],
}

这样，在引用组件时，可以直接使用@components来代替src/components，代码更加简洁和易于维护。

总之，rollup-plugin-alias是一个非常实用的插件，在一些大型项目中可以帮助我们更好地管理模块和依赖关系。

jieyucx

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
rollup常用插件盘点

是一个用于将CommonJS模块转换为ES6模块的Rollup插件。它的主要作用是允许Rollup打包CommonJS模块（如Node.js中的模块）而不是只打包ES6模块。举个例子，假设您的项目包含一个使用CommonJS。
复制链接

扫一扫