我正在尝试使用Rollup设置React组件库，然后由我的React应用安装并使用它。正在使用的React应用程序正在服务器上呈现。我已经设法通过Webpack进行了设置，其中将我的React组件库捆绑到一个文件中并向下发送。问题是这是一个巨大的文件，并且下载时间很长，因此否定了SSR的观点（至少是其中的一部分）。

因此，我决定使用汇总将组件拆分为单独的ES模块，然后将其引入并根据应用程序的要求进行使用。问题是我根本无法使它与SSR一起使用。这是我第一次使用汇总，所以我可能错过了一些显而易见的东西。这是我的rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import css from 'rollup-plugin-css-only';
import alias from '@rollup/plugin-alias';
import image from '@rollup/plugin-image';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import namedDeps from './named-dependencies';
import stylus from './rollup-plugin-stylus-v2';
import postcssUrl from './rollup-plugin-postcss-url';
import autoExternal from 'rollup-plugin-auto-external';
import url from '@rollup/plugin-url';
import fs from 'fs';

const namedDepsObject = namedDeps
  .map(depPath => ({
    keys: Object.keys(require(depPath)).filter(v => v !== 'default'),name: depPath,}))
  .reduce((acc,val) => {
    acc[val.name] = val.keys;
    return acc;
  },{});

let ComponentsList = require('./components-file'); // This has an array of component src and name

const rollConfigObject = fileName => {
  const configOpts = {
    input: `${fileName.src}`,output: [
      {
         file: `dist/ssr/esm/${fileName.name}.js`,format: 'esm',}
    ],plugins: [
      autoExternal(),url({
        include: ['**/*.svg','**/*.png','**/*.jpg','**/*.gif','**/*.woff','**/*.woff2','**/*.eot','**/*.ttf',],emitFiles: false
      }),babel({
        exclude: 'node_modules/**',presets: ['@babel/env','@babel/react'],plugins: ['@babel/plugin-syntax-dynamic-import'],runtimeHelpers: true,}),resolve(),commonjs({
        sourceMap: false,namedExports: {
          ...namedDepsObject,},image(),json(),stylus(),postcssUrl(),css({
        output: function(styles,styleNodes){
          fs.appendFileSync(__dirname + '/dist/ssr/styles.css',styles);
        }
      }),};
  return { ...configOpts };
};

export default ComponentsList.map(
  moduleName => {
    return rollConfigObject(moduleName);
  }
)

现在这会像我想要的那样创建单独的组件束，但是问题在于，它似乎在createCommonjsModule的{​​{1}}方法中包含代码，然后注入了{{1} }，当我尝试在服务器上进行渲染时会抛出错误。

我试图根本不包括node_modules，所以当我尝试仅使用node_modules插件运行它时，它将抛出document并拒绝构建。一个例子是Braintree，它使用babel添加了大量代码。 我不确定如何使它不会在组件内注入node_modules代码。在该应用程序中，我正在使用Webpack通过babel运行这些模块，但是诸如Error: Could not resolve entry module之类的对象将通过，然后拒绝在服务器上工作。

任何建议在这里都会很棒，现在已经为此苦苦挣扎了好几天。谢谢！