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

Posted 2023-02-22

【中文标题】使用汇总而不是一个庞大的 index.js 文件导出单个组件？

【英文标题】：Individual component exports with Rollup instead of one massive index.js file?

【发布时间】：2022-01-18 23:10:50

【问题描述】：

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

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

我希望我可以将每个组件单独捆绑，这样使用应用程序就不必下载巨大的 index.js 文件，但这可能是我对 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(),
    ],
;

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

【参考方案1】：

您可以尝试添加preserveModule

export default 
  preserveModules: true,
  ...

【讨论】：

是的，很有趣。而是创建与源目录结构匹配的导出并包含 everything（不仅仅是在 index.js 中导出的内容）。这就像我原来的问题的极端相反。 :)

@BrandonDurham 好点，另一种选择是使用类似 rollup-plugin-multi-input 并更改您的输入： ['src/**/*.js'] 它将处理每个组件个人