单独的组件输出使用汇总，而不是一个大规模的index.js文件？

Question

我正在开发一个使用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(),
    ],
};

注意:也许不重要，但是这个项目是作为一个私有回购发布给npm的，但是目前使用它的应用程序使用提交哈希来安装它。

Answer 1

您可以尝试添加preserveModule

export default {
  preserveModules: true,
  ...
}

Answer 2

我已经对rollup配置做了一些工作。我的问题是分别导出自定义元素。在下面找到我的自定义解决方案：

function generateComponentConfig() {
const dir = fs.readdirSync("./src/web-components");
return dir.map(folderName => {
    return {
        input: [`src/web-components/${folderName}/index.js`],
        output: [
            { file: `public/build/wc/${folderName}.mjs`, 'format': 'es' },
            { file: `public/build/wc/${folderName}.js`, 'format': 'umd', name: folderName }
        ],
        plugins: [
            svelte({ compilerOptions:{customElement: true}, emitCss: false, include: /\.wc\.svelte$/ }),
            svelte({ compilerOptions: {customElement: false}, emitCss: false, exclude: /\.wc\.svelte$/ }),
            resolve()
        ]
    };
})};

在导出中使用上述函数，如下所示

export default [
...generateComponentConfig(), {
input: 'src/main.js',
output: {
  sourcemap: true,
  format: 'iife',
  name: 'app',
  file: 'public/build/bundle.js',
},
plugins: plugins(),
watch: {
 clearScreen: false,
}}];