javascript - 使用 Rollup 而不是一个庞大的 index.js 文件导出单个组件？

Question

我正在开发一个使用 React 构建的专有组件库，并使用 Rollup 来捆绑所有内容。目前，它将所有内容捆绑到这些文件中:

dist
 ├ cjs
 │  └ index.js (1.7mb)
 └ esm
    └ index.js (1.7mb)

我希望我可以将每个组件单独捆绑在一起，这样消费应用程序就不必下载巨大的 index.js 文件，但这可能是我对 Rollup 缺乏经验的地方中。

我目前有一个 Rollup 入口点:

input: [
    'src/index.js',
],

我的 index.js 文件看起来像这样(但包含更多组件):

import { Badge } from './components/Badge';
import { Button } from './components/Button';
import { CardFooter } from './components/CardFooter';
import { CardHeader } from './components/CardHeader';
import { CardTagList } from './components/CardTagList';
import { CardToolbar } from './components/CardToolbar';
import { CartAnimation } from './components/CartAnimation';

export {
    Badge,
    BasePrice,
    Button,
    CardFooter,
    CardHeader,
    CardTagList,
    CardToolbar,
    CartAnimation,
};

我必须做些什么来确保每个组件都是单独捆绑的，并且仍然可以导入到使用库的应用程序中:

import { Button } from '@company/component-library';

这是我今天的完整配置:

import { babel } from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
import eslint from '@rollup/plugin-eslint';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import stylelint from 'rollup-plugin-stylelint';
import styles from 'rollup-plugin-styles';

require('dotenv').config();

export default {
    external: [
        'react',
        'react-dom',
        'styled-components',
    ],
    input: [
        'src/index.js',
    ],
    output: [
        {
            // Bundle into ESM for modern consumers.
            // Only ESM build can currently be tree-shaken.
            dir: 'dist/esm',
            format: 'esm',
        },
        {
            // Bundle into CJS for other consumers.
            dir: 'dist/cjs',
            format: 'cjs',
        },
    ],
    plugins: [
        eslint({
            include: '**/*.js',
            throwOnError: true,
        }),
        stylelint(),
        babel({
            babelHelpers: 'bundled',
            exclude: 'node_modules/**',
        }),
        resolve({
            browser: true,
        }),
        styles(),
        commonjs(),
        json(),
        dynamicImportVars({}),
        terser(),
    ],
};

注意:可能不重要，但这个项目作为私有(private)仓库发布到 npm，但目前使用它的应用程序使用提交哈希安装它。

Answer 1

您可以尝试添加 preserveModule

export default {
  preserveModules: true,
  ...
}