使用 rollup 封装 React + Ant Design组件库

创建rollup环境

mkdir rollup-demo
cd rollup-demo
pnpm init
pnpm add rollup -D

目录结构

添加rollup官方依赖

pnpm add @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-terser @rollup/plugin-typescript -D

添加第三方依赖

pnpm add @babel/core @babel/preset-env @babel/preset-react tslib -D
pnpm add antd react

rollup.config.mjs

import babel, { getBabelOutputPlugin } from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import terser from "@rollup/plugin-terser";
import typescript from "@rollup/plugin-typescript";

export default {
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: "./tsconfig.json",
      declaration: false,
      jsx: "preserve",
    }),
    babel({
      presets: ["@babel/preset-react"],
      babelHelpers: "bundled",
      extensions: [".js", ".jsx", ".es6", ".es", ".mjs", ".ts", ".tsx"],
    }),
    terser(),
  ],
  input: ["src/index.ts"],
  output: [
    {
      dir: "dist",
      format: "es",
      name: "version",
      plugins: [
        getBabelOutputPlugin({
          presets: ["@babel/preset-env"],
        }),
      ],
    },
  ],
  // 指出哪些模块需要被视为外部引入
  external: ["react", "antd"],
};

.babelrc.json

{
  "presets": [["@babel/env", { "modules": false }]]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["types/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"],
  "exclude": ["node_modules"]
}

添加Tailwind css

pnpm add rollup-plugin-postcss postcss postcss-import autoprefixer cssnano tailwindcss -D

改造 rollup.config.mjs

// rollup.config.mjs
import babel, { getBabelOutputPlugin } from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import terser from "@rollup/plugin-terser";
import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import PostcssImport from "postcss-import";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";

export default {
  plugins: [
    postcss({
      modules: true,
      extract: true,
      plugins: [
        PostcssImport(),
        tailwindcss({ content: ["./src/**/*.{js,ts,jsx,tsx}"] }),
        autoprefixer(),
        cssnano(),
      ],
    }),
    resolve(),
    commonjs(),
    typescript({
      tsconfig: "./tsconfig.json",
      declaration: false,
      jsx: "preserve",
    }),
    babel({
      presets: ["@babel/preset-react"],
      babelHelpers: "bundled",
      extensions: [".js", ".jsx", ".es6", ".es", ".mjs", ".ts", ".tsx"],
    }),
    terser(),
  ],
  input: ["src/index.ts"],
  output: [
    {
      dir: "dist",
      format: "es",
      name: "version",
      plugins: [
        getBabelOutputPlugin({
          presets: ["@babel/preset-env"],
        }),
      ],
    },
  ],
  // 指出哪些模块需要被视为外部引入
  external: ["react", "antd"],
};

src/style/tailwind.css

/* @tailwind base; */
@tailwind components;
@tailwind utilities;