Rollup 实践：插件生态和实用技巧（续）

news2024/11/17 9:57:38

在这里插入图片描述

在前面的文章中，我们已经了解了 Rollup 的性能优化和高级用法。本篇文章将继续探讨 Rollup 的插件生态和实用技巧。

插件生态

Rollup 拥有一个丰富的插件生态，下面我们介绍几个实用的插件：

rollup-plugin-terser：使用 Terser 压缩 JavaScript 代码，减小输出文件大小。
rollup-plugin-postcss：使用 PostCSS 处理样式文件，支持 CSS、Less、Sass 等多种格式。
rollup-plugin-babel：使用 Babel 编译 JavaScript 代码，支持 ES2015+ 和 JSX 语法。
rollup-plugin-commonjs：将 CommonJS 模块转换为 ES6 模块，以便 Rollup 处理。

实用技巧

开发环境与生产环境

我们可以使用环境变量来区分开发环境和生产环境，为每个环境配置不同的插件和输出选项。

// rollup.config.js
const isProduction = process.env.NODE_ENV === 'production';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: !isProduction,
  },
  plugins: [
    isProduction && terser(),
    /* ... */
  ],
};

开发服务器

使用 rollup-plugin-serve 插件启动一个简单的开发服务器，实时预览构建结果。

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

export default {
  /* ... */
  plugins: [
    !isProduction && serve({
      contentBase: 'dist',
      port: 3000,
    }),
    /* ... */
  ],
};

模块别名

使用 rollup-plugin-alias 插件为模块路径设置别名，简化导入语句。

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

export default {
  /* ... */
  plugins: [
    alias({
      '@': './src',
    }),
    /* ... */
  ],
};