rollup 打包 react 组件库

基本需求

打包react组件，满足支持 typescript、sass、声明文件、map文件、代码压缩等基本需求。

项目详情见 github：https://github.com/zhl0791/rollup-react-library-template

需要用到的插件

@rollup/plugin-json：支持 json 文件。
@rollup/plugin-node-resolve：支持查找外部模块；
@rollup/plugin-commonjs：支持 CommonJS 模块；
rollup-plugin-postcss-modules：支持 css module；
rollup-plugin-typescript2：支持 typescript；
rollup-plugin-dts：打包声明文件；
rollup-plugin-terser：代码压缩。
...

rollup.config.js 配置文件

import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
// import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss-modules';
import typescript from 'rollup-plugin-typescript2';
import dts from 'rollup-plugin-dts';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default [
  {
    input: 'src/component/index.tsx',
    output: [
      {
        file: 'dist/index.js',
        // 编译目标，es module
        format: 'es',
        sourcemap: true,
      },
    ],
    plugins: [
      // 支持第三方模块
      resolve(),
      // 支持 commonjs 格式
      commonjs(),
      json(),
      postcss({
        extract: true, // extracts to `${basename(dest)}.css`
        plugins: [],
        writeDefinitions: false,
        // modules: { ... }
      }),
      typescript(),
      production && terser(),
    ],
    // 第三方模块不会强行打包到输出中
    external: (id) => /^(qss|react|antd|@ant-design\/icons|core-js)/.test(id),
  },
  // 打包声明文件
  {
    input: 'src/component/index.tsx',
    output: [{ file: 'dist/index.d.ts', format: 'es' }],
    plugins: [dts()],
  },
];

如果需要支持更多功能，可以在 https://github.com/rollup/awesome 上寻找对应的插件进行支持。

package.json 文件中加入如下内容：

{
  // ...
  "scripts": {
    "build": "rollup --config rollup.config.js",
    "watch": "rollup --config rollup.config.js -w"
  }
}

运行 npm run build 即可编译。

来源：oschina

链接：https://my.oschina.net/whutzl/blog/4915743

标签

commonjs

typescript

javascript

postcss

github