使用rollup摇动树

Question

我有一个项目，其中我使用Rollup捆绑了一个组件库(生成一个bundle.esm.js文件)。然后在另一个项目中使用这些组件，该项目生成使用这些组件的网页-每个页面使用不同的组件。问题是，无论我使用的是哪个组件，整个组件库总是与不同的页面包捆绑在一起，这不必要地增加了包的大小。

这是我的汇总设置：

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import pkg from './package.json';

const extensions = [
  '.js', '.jsx', '.ts', '.tsx',
];
export default [
  {
    input: './src/base/index.ts',
    plugins: [
      peerDepsExternal(),
      resolve({ extensions }),
      babel({
        exclude: 'node_modules/**',
        extensions,
      }),
      commonjs(),
    ],
    output: [
      { file: pkg.main, format: 'cjs', sourcemap: true },
      { file: pkg.module, format: 'es', sourcemap: true },
    ],
    watch: {
      clearScreen: false,
    },
  },
];

在webpack中，我也将"modules“设置为false。

Answer 1

为了从两端实现树形代码，你需要做一些事情--构建的包和使用它的项目。

从您的代码片段中，我看到您没有在汇总配置文件中添加标志preserveModules: true，以防止捆绑构建输出。一个捆绑的文件FYI，无法绑定到Webpack树上。

export default {
  ...
  preserveModules: true,
  ...
}

在使用它的项目一侧，您必须在package.json中指定sideEffects -阅读doc以了解如何配置它们。除此之外，webpack里面的optimization也要有sideEffects: true，也要看here文档。

希望这能有所帮助！