如何使用 rollup 导入共享模块而不重复代码？

Question

我有两个我们的组件，让我们调用 comp1 和 comp2，我的项目结构如下所示...

web-components
  packages
    comp1
      package.json
    comp2
      package.json
  lerna.json
  rollup.config.json
  package.json

这两者都导入聚合物材料库

@material/mwc-icon-button

。当我构建项目时，问题就出现了。然后将材料代码注入到两个输出中。我想避免这种情况，但我不知道该怎么做。我考虑过使用全局变量，但实施者必须知道安装材料依赖项并正确配置全局变量，但这似乎相当繁重。

所以问题是在输出中不重复代码的情况下执行此操作的正确方法是什么？

这是我的完整汇总配置...

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import pug from 'rollup-plugin-pug';
import postcss from 'rollup-plugin-postcss';

const globals = {}
// const external = Object.keys(pkg.dependencies);
const plugins = [
    resolve({
      module: true,
      main: true,
      jsnext:"main",
      browser: true
    }),
    postcss({
      plugins: []
    }),
    commonjs(),
    pug()
];
module.exports = {
  plugins,
  input: 'src/jrg-dropdown.mjs',
  output: {
    file: 'dist/index.mjs',
    format: 'esm',
    globals
  }
}; 

Answer 1

处理多个包中共享依赖关系的常见方法是将它们定义为 package.json 中的peerDependency。对 comp2 执行相同操作

{
 "name": "comp1",
 "version": "1.0.0",
  "peerDependencies": {
   "@material/mwc-icon-button": "^0.x.x"
  }
}

更新 rollup.config.js 将 @material/mwc-icon-button 标记为外部

 export default {
      input: 'src/index.js',
      output: {
        file: 'dist/bundle.js',
        format: 'esm',
        globals: {
          '@material/mwc-icon-button': 'mwcIconButton'
        }
      },
      external: ['@material/mwc-icon-button'],
      plugins: [
        resolve(),
        commonjs(),
        postcss(),
        pug(),
      ]
    };

在 lerna.json 中启用提升

{
  "packages": ["packages/*"],
  "version": "independent",
  "npmClient": "npm",
  "hoist": true
}