reactjs - Rollup Build 对于组件库来说似乎太大了

Question

我正在使用汇总(v2.13.1)，导出我的 React 库一切正常，但是，我相信我在供应商 js 文件中使用整个库，而不仅仅是我正在使用的组件。 当我运行工具分析时，该库似乎有点大。看来我没有正确执行模块，或者？

package.json构建命令:“build”:“rollup -c”，

这是我的汇总配置，我缺少什么或做错了什么吗？

And I am using it in a seperate application like so:
import { Button, Icon } from "myReactLibrary";

代码:汇总配置

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';
import copy from 'rollup-plugin-copy';
import postcss from 'rollup-plugin-postcss';
const packageJson = require('./package.json');

export default {
  input: 'src/index.ts',
  output: [
    {
      dir: packageJson.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
     dir: packageJson.module,
     format: 'esm',
     sourcemap: true,
   },
],
 plugins: [
   peerDepsExternal(),
   typescript({useTsconfigDeclarationDir: true}),
   resolve(),
   commonjs(),
   postcss({
    modules: true,
   }),
  copy({
    targets: [
      {
        src: 'src/styles/colors.scss',
        dest: 'build',
        rename: 'colors.scss',
      },
    {
      src: 'src/styles/helpers.scss',
      dest: 'build',
      rename: 'helpers.scss',
    },
    {
      src: 'src/styles/mixins.scss',
      dest: 'build',
      rename: 'mixins.scss',
    },
  ],
}),
 ],
};

“src/index.ts”文件是:

  import Accordion from './Accordion/Accordion';
  import AccordionGroup from './Accordion/AccordionGroup';
  import Avatar from './Avatar/Avatar';
  import Button, {BUTTON_THEMES} from './Button/Button';
  import Checkbox from './Checkbox/Checkbox';
  import CheckboxGroup from './Checkbox/CheckboxGroup';
  import Form from './Form/Form';
  import {Size as ELEMENT_SIZE} from './base.types';
  import Grid, {BREAKPOINTS} from './Grid/Grid';
  import Icon from './Icon/Icon';
  import InputField from './Input/Input';
  import {LoaderComponent, LoaderPage} from './Loaders/Loaders';
  import Modal from './Modal/Modal';
  import Panel from './Panel/Panel';
  import PlainModal from './PlainModal/PlainModal';
  import Radio from './Radio/Radio';
   import RadioGroup from './Radio/RadioGroup';
  import SelectField from './SelectField/SelectField';
  import {SelectOptions, SelectArrayOptions, SelectBaseOption, SelectGroupOptions} from   './SelectField/SelectField.types';
  import TextArea from './TextArea/TextArea';
  import {Label, ErrorMessage} from './Parts';

 export {
    Accordion,
    AccordionGroup,
    Avatar,
    Button,
    BUTTON_THEMES,
    Checkbox,
    CheckboxGroup,
    ELEMENT_SIZE,
    ErrorMessage,
    Form,
    Grid,
    BREAKPOINTS,
    Icon,
    InputField,
    Label,
    LoaderComponent,
    LoaderPage,
    Modal,
    Panel,
    PlainModal,
    Radio,
    RadioGroup,
    SelectField,
    SelectOptions,
    SelectArrayOptions,
    SelectBaseOption,
    SelectGroupOptions,
    TextArea,
  };

Answer 1

您可以在输出配置中使用汇总选项preserveModules:

output: [
    {
      dir: packageJson.main,
      format: 'cjs',
      sourcemap: true,
      preserveModules: true,
    },
    {
     dir: packageJson.module,
     format: 'esm',
     sourcemap: true,
     preserveModules: true,
   },

https://rollupjs.org/guide/en/#outputpreservemodules