Rollup 构建空index.js

Question

我正在创建一个简单的组件以在 npm 上发布并使用 rollup 进行构建。问题是index.js除了

import 'react'

什么都没有

这是汇总配置

import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import { defineConfig } from 'rollup';

export default defineConfig({
  input: 'src/index.ts',
  output: {
    dir: 'dist',
    format: 'es',
    name: 'beyonderui',
  },
  external: ['react', 'react-dom'],
  plugins: [
    postcss({ include: '**/*.css', extract: true, minimize: true }),
    typescript({ tsconfig: 'tsconfig.json' }),
  ],
});

这是打字稿配置

{
  "compilerOptions": {
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "target": "ES2020",
    "module": "Es6",
    "declaration": true,
    "declarationDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "emitDeclarationOnly": false
  }
}

和入口文件

index.ts

代码

export * from './components/modals/reactModal/Modal'

模态组件代码

import * as React from 'react';
import {
  CSSProperties,
  ComponentType,
  Dispatch,
  ReactNode,
  SetStateAction,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import styles from './css/Modal.module.css';
import animations from './css/ModalAnimations.module.css';

type PropsType = {
  children?: ReactNode;
  show: boolean;
  setShow: Dispatch<SetStateAction<boolean>>;
  modalStyles?: CSSProperties;
  overlayStyles?: CSSProperties;
  overlayOpacity?: number;
  closeButtonStyles?: CSSProperties;
  closeButtonVariant?: number;
  CustomCloseButton?: ComponentType<any> | null;
  animateIn?: string;
  animateOut?: string;
  animateDuration?: number;
  onOpen?: () => void;
  onOpenStart?: () => void;
  onOpenEnd?: () => void;
  onClose?: () => void;
  onCloseStart?: () => void;
  onCloseEnd?: () => void;
};

type AnimationObject = {
  in: string[];
  out: string[];
  init: string[];
};

export default function Modal({
  children,
  show = false,
  setShow = () => {},
  modalStyles = {},
  overlayStyles = {},
  overlayOpacity = 0.3,
  closeButtonStyles = {},
  closeButtonVariant = 1,
  CustomCloseButton = null,
  animateIn = 'fadeIn-down',
  animateOut = 'fadeOut-down',
  animateDuration = 300,
  onOpen = () => {
    console.log('opening');
  },
  onOpenStart = () => {
    console.log('open start');
  },
  onOpenEnd = () => {
    console.log('open end');
  },
  onClose = () => {
    console.log('closing');
  },
  onCloseStart = () => {
    console.log('closing start');
  },
  onCloseEnd = () => {
    console.log('closing end');
  },
}: PropsType) {
...

return (
 ...
 )
}

我通常不会深入研究图书馆，所以我不知道我在这里做错了什么。我到处搜索都找不到解决方案。

Answer 1

export Modal as EditCommentModal from "./components/modals/reactModal/Modal";