基于rollup打造组件库，你可能会用到这些插件

2022-12-13 922

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 最近在重复赵轮子，用rollup搞一个react 组件库，今天就简单整理下用到的插件。简单来说插件就是能力者，帮助你完成某事，相信大家都用过webpack构建项目，我们会用到各种plugin和loader来帮我们处理js、css、图片、压缩代码等，那么在rollup里想要完成某事，也同样需要对应的plugin来完成，而且rollup的配置会更加简单。

最近在重复赵轮子，用rollup搞一个react 组件库，今天就简单整理下用到的插件。

简单来说插件就是能力者，帮助你完成某事，相信大家都用过webpack构建项目，我们会用到各种plugin和loader来帮我们处理js、css、图片、压缩代码等，那么在rollup里想要完成某事，也同样需要对应的plugin来完成，而且rollup的配置会更加简单。

rollup-plugin-babel

一看到babel我们就知道干什么的了，可以让我们提前使用js的新特性，把最新的语法转为es5.

然后我们再结合@babel/preset-react插件来识别jsx代码。

示例：

import { babel } from '@rollup/plugin-babel';
const config = {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'esm'
  },
  plugins: [babel({ babelHelpers: 'bundled' })]
};
export default config;

@rollup/plugin-commonjs

rollup本身是不支持CommonJS的，使用了这个插件，就可以解析CommonJS模块了。另外如果在一个配置内同时使用了@rollup/plugin-babel，需要把@rollup/plugin-commonjs 插件放在前面使用。

import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
const config = {
  ...
  plugins: [
    commonjs(),
    babel({ babelHelpers: 'bundled' })
  ],
};

rollup-plugin-postcss

处理css会用到rollup-plugin-postcss插件。它支持css文件的加载、css自动加前缀、css压缩、对scss/less的支持等等，同时支持内联、将css提取到独立文件。

// rollup.config.js
import postcss from 'rollup-plugin-postcss'
export default {
  plugins: [
    postcss({
      plugins: []
    })
  ]
}

rollup-plugin-terser

用于在生产环境中，对代码进行压缩。

import { rollup } from "rollup";
import { terser } from "rollup-plugin-terser";
rollup({
  input: "main.js",
  plugins: [terser()],
});

rollup-plugin-typescript2

让你的项目支持使用TS来进行开发，插件执行时会默认读取tsconfig.json配置。

// rollup.config.js
import typescript from 'rollup-plugin-typescript2';
export default {
 input: './main.ts',
 plugins: [
  typescript(/*{ plugin options }*/)
 ]
}

rollup-plugin-dts

自动帮你生成类型声明文件 *.d.ts

import dts from "rollup-plugin-dts";
const config = [
  // …
  {
    input: "./my-input/index.d.ts",
    output: [{ file: "dist/my-library.d.ts", format: "es" }],
    plugins: [dts()],
  },
];
export default config;

@rollup/plugin-json

可以将.json文件转为es6模块供rollup处理。

import json from '@rollup/plugin-json';
export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [json()]
};

一个json 文件

e3f84dd8c9fa0c35213829bd7bf2520f_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

image.png

转换后

ce23bc5e7e653c43ff6f266dd97d4b7c_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

image.png

rollup-plugin-eslint

js代码静态检查

import { eslint } from "rollup-plugin-eslint";
export default {
  input: "main.js",
  plugins: [
    eslint({
      /* your options */
    })
  ]
};

最后

上面整理了目前用到的插件，组合后的配置如下：

import commonjs from 'rollup-plugin-commonjs';
import babel from "rollup-plugin-babel";
import { terser } from 'rollup-plugin-terser';
import { eslint } from 'rollup-plugin-eslint';
import json from '@rollup/plugin-json';
import typescript from "rollup-plugin-typescript2";
import dts from "rollup-plugin-dts";
export default [
    {
        input: 'src/main.js',
        output: {
            name: 'timeout',
            file: '/lib/tool.js',
            format: 'umd'
        },
        plugins: [
            commonjs(),
            typescript(),
            eslint(),
            babel(),
            json(),
            terser(),
            dts()
        ]
    }
];

另外还有一些未使用的插件，在造轮子过程中应该还会用到，后面再继续补充。

@rollup/plugin-url
rollup-plugin-styles
@rollup/plugin-replace
rollup-plugin-multi-input
rollup-plugin-static-import
rollup-plugin-ignore-import