rollup打包基于antd的react组件库

2023-09-14 21:15:24

前段时间公司在做公共组件的抽取，打算做一个公共的组件库，本来的想法是直接把封装好的各个公共组件直接引入到项目中就可以使用，后来发现直接引用会报错，大概意思是直接引入不能识别jsx语法之类的错误。遂参考各个现成类库antd、elementUI等UI库的做法经过打包生成可供其他项目使用的独立包。

rollup介绍

rollup是一个用于将现代JavaScript应用程序打包到适合生产环境的单一文件中的模块打包器。它使用一种称为tree-shaking的技术，可以去除代码中未使用的部分，从而创建更小的包。

打包过程

安装rollup

npm install --save-dev rollup

创建rollup配置文件

在项目根目录创建一个名为rollup.config.js的文件，并添加以下内容：

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from 'rollup-plugin-json';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'umd',
    name: 'my-component-library',
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM',
    },
  },
  plugins: [
    resolve(),
    commonjs(),
    json(),
    babel({
      exclude: 'node_modules/**',
    }),
    terser(),
  ],
};